FIX: allows mini-tag-chooser to fetch tags in background (#8033)

FIX: allows mini-tag-chooser to fetch tags in background (#8033)

This is useful when changing the category in the composer for example. When opening mini-tag-chooser after, tags will be correctly updated for the selected category.

diff --git a/app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6 b/app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6
index 6f3baa3..4d579c4 100644
--- a/app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6
+++ b/app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6
@@ -188,7 +188,7 @@ export default ComboBox.extend(TagsMixin, {
     return content;
   },
 
-  _prepareSearch(query) {
+  _prepareSearch(query, options) {
     const data = {
       q: query,
       limit: this.get("siteSettings.max_tag_search_results"),
@@ -203,7 +203,7 @@ export default ComboBox.extend(TagsMixin, {
 
     if (!this.everyTag) data.filterForInput = true;
 
-    this.searchTags("/tags/filter/search", data, this._transformJson);
+    this.searchTags("/tags/filter/search", data, this._transformJson, options);
   },
 
   _transformJson(context, json) {
@@ -245,6 +245,12 @@ export default ComboBox.extend(TagsMixin, {
     this.destroyTags(tags);
   },
 
+  didUpdateAttrs() {
+    this._super(...arguments);
+
+    this._prepareSearch(this.filter, { background: true });
+  },
+
   _tagsChanged() {
     if (this.attrs.onChangeTags) {
       this.attrs.onChangeTags({ target: { value: this.tags } });
diff --git a/app/assets/javascripts/select-kit/mixins/tags.js.es6 b/app/assets/javascripts/select-kit/mixins/tags.js.es6
index d409f63..39644bf 100644
--- a/app/assets/javascripts/select-kit/mixins/tags.js.es6
+++ b/app/assets/javascripts/select-kit/mixins/tags.js.es6
@@ -10,8 +10,10 @@ export default Ember.Mixin.create({
     if (searchDebounce) run.cancel(searchDebounce);
   },
 
-  searchTags(url, data, callback) {
-    this.startLoading();
+  searchTags(url, data, callback, options) {
+    options = options || {};
+
+    if (!options.background) this.startLoading();
 
     return ajax(Discourse.getURL(url), {
       quietMillis: 200,
@@ -21,10 +23,12 @@ export default Ember.Mixin.create({
     })
       .then(json => {
         this.set("asyncContent", callback(this, json));
-        this.autoHighlight();
+        if (!options.background) this.autoHighlight();
       })
       .catch(error => popupAjaxError(error))
-      .finally(() => this.stopLoading());
+      .finally(() => {
+        if (!options.background) this.stopLoading();
+      });
   },
 
   validateCreate(term) {

GitHub sha: 171618e7

1 Like

This is nice but can I be annoying and suggest we use async: true or defer: true as the option name instead of background? It’s more consistent with other code we have, plus background often refers to a front end thing (css).

1 Like

You sure can sir! will change it when I have the opportunity.

However background here wants to express the fact that it’s happening with no direct interaction from the user. So not sure defer or async actually express this.

reminder that this change causes “your topic is similar to…” title lookup queries on every keypress in quick edit mode

1 Like