Fix auto dropdown for tag on page load (#5532)

* Fix auto dropdown for tag on page load

* Fix tag related bugs

- reset doc user_tags on change
- move "label conversion toTitle" from onTagAdd listener
to addTag function
- remove unnecessary refresh call

frappe/public/js/frappe/form/form_sidebar.js

@@ -87,7 +87,7 @@ frappe.ui.form.Sidebar = Class.extend({
 			parent: this.sidebar.find(".tag-area"),
 			frm: this.frm,
 			on_change: function(user_tags) {
-				me.frm.doc._user_tags += ("," + user_tags);
+				me.frm.doc._user_tags = user_tags;
 			}
 		});
 	},

frappe/public/js/frappe/ui/tag_editor.js

@@ -34,7 +34,6 @@ frappe.ui.TagEditor = Class.extend({
 			placeholder: "Add a tag ...",
 			onTagAdd: (tag) => {
 				if(me.initialized && !me.refreshing) {
-					tag = toTitle(tag);
 					return frappe.call({
 						method: 'frappe.desk.tags.add_tag',
 						args: me.get_args(tag),
@@ -116,6 +115,7 @@ frappe.ui.TagEditor = Class.extend({
 		try {
 			me.tags.clearTags();
 			if(user_tags) {
+				me.user_tags = user_tags;
 				me.tags.addTags(user_tags.split(','));
 			}
 		} catch(e) {

frappe/public/js/frappe/ui/tags.js

@@ -47,6 +47,7 @@ frappe.ui.Tags = class {
 
 		this.$placeholder.on('click', () => {
 			this.activate();
+			this.$input.focus(); // focus only when clicked
 		});
 	}
 
@@ -57,7 +58,6 @@ frappe.ui.Tags = class {
 	activate() {
 		this.$placeholder.hide();
 		this.$inputWrapper.show();
-		this.$input.focus();
 	}
 
 	deactivate() {
@@ -65,30 +65,24 @@ frappe.ui.Tags = class {
 		this.$placeholder.show();
 	}
 
-	refresh() {
-		this.deactivate();
-		this.activate();
-	}
-
 	addTag(label) {
-		if(label && !this.tagsList.includes(label)) {
+		label = toTitle(label);
+		if(label && label!== '' && !this.tagsList.includes(label)) {
 			let $tag = this.getTag(label);
 			this.getListElement($tag).insertBefore(this.$inputWrapper);
 			this.tagsList.push(label);
 			this.onTagAdd && this.onTagAdd(label);
-
-			this.refresh();
 		}
 	}
 
 	removeTag(label) {
 		if(this.tagsList.includes(label)) {
 			let $tag = this.$ul.find(`.frappe-tag[data-tag-label="${label}"]`);
-			
+
 			// Just don't remove tag, but also the li DOM.
 			$tag.parent('.tags-list-item').remove();
+			this.tagsList.splice(this.tagsList.indexOf(label), 1);
 
-			this.tagsList = this.tagsList.filter(d => d !== label);
 			this.onTagRemove && this.onTagRemove(label);
 		}
 	}

frappe/public/less/tags.less

@@ -13,7 +13,7 @@
 
 .tags-list-item {
 	display: inline-block;
-	margin: 0px 3px;
+	margin: 0 5px 5px 0;
 }
 
 .tags-placeholder {