FIX: prevents debouncing and query to override each other (#11704)

FIX: prevents debouncing and query to override each other (#11704)

Before this change we were setting the input after the query has been done, resulting in us overwriting the input if the user types during the query. We don’t need to update it after the query, we just need to ensure it’s set when we load the page and then it should stay in sync.

diff --git a/app/assets/javascripts/discourse/app/controllers/users.js b/app/assets/javascripts/discourse/app/controllers/users.js
index 8ebaf7a..fe78c4c 100644
--- a/app/assets/javascripts/discourse/app/controllers/users.js
+++ b/app/assets/javascripts/discourse/app/controllers/users.js
@@ -1,4 +1,5 @@
 import Controller, { inject as controller } from "@ember/controller";
+import { action } from "@ember/object";
 import discourseDebounce from "discourse-common/lib/debounce";
 import { equal } from "@ember/object/computed";
 import { longDate } from "discourse/lib/formatter";
@@ -12,6 +13,7 @@ export default Controller.extend({
   asc: null,
   name: "",
   group: null,
+  nameInput: null,
   exclude_usernames: null,
   isLoading: false,
 
@@ -20,6 +22,8 @@ export default Controller.extend({
   loadUsers(params) {
     this.set("isLoading", true);
 
+    this.set("nameInput", params.name);
+
     this.store
       .find("directoryItem", params)
       .then((model) => {
@@ -28,7 +32,6 @@ export default Controller.extend({
           model,
           lastUpdatedAt: lastUpdatedAt ? longDate(lastUpdatedAt) : null,
           period: params.period,
-          nameInput: params.name,
         });
       })
       .finally(() => {
@@ -36,25 +39,22 @@ export default Controller.extend({
       });
   },
 
-  @observes("nameInput")
-  _setName() {
-    discourseDebounce(
-      this,
-      function () {
-        this.set("name", this.nameInput);
-      },
-      500
-    );
+  @action
+  onFilterChanged(filter) {
+    discourseDebounce(this, this._setName, filter, 500);
+  },
+
+  _setName(name) {
+    this.set("name", name);
   },
 
   @observes("model.canLoadMore")
-  _showFooter: function () {
+  _showFooter() {
     this.set("application.showFooter", !this.get("model.canLoadMore"));
   },
 
-  actions: {
-    loadMore() {
-      this.model.loadMore();
-    },
+  @action
+  loadMore() {
+    this.model.loadMore();
   },
 });
diff --git a/app/assets/javascripts/discourse/app/templates/mobile/users.hbs b/app/assets/javascripts/discourse/app/templates/mobile/users.hbs
index e7f3884..05c929f 100644
--- a/app/assets/javascripts/discourse/app/templates/mobile/users.hbs
+++ b/app/assets/javascripts/discourse/app/templates/mobile/users.hbs
@@ -11,7 +11,12 @@
             {{lastUpdatedAt}}
           </div>
         {{/if}}
-        {{text-field value=nameInput placeholderKey="directory.filter_name" class="filter-name no-blur"}}
+        {{input
+          value=(readonly nameInput)
+          input=(action "onFilterChanged" value="target.value")
+          placeholderKey="directory.filter_name"
+          class="filter-name no-blur"
+        }}
       </div>
 
       {{#conditional-loading-spinner condition=model.loading}}
diff --git a/app/assets/javascripts/discourse/app/templates/users.hbs b/app/assets/javascripts/discourse/app/templates/users.hbs
index b406e63..77446fb 100644
--- a/app/assets/javascripts/discourse/app/templates/users.hbs
+++ b/app/assets/javascripts/discourse/app/templates/users.hbs
@@ -19,7 +19,12 @@
                 {{i18n "directory.total_rows" count=model.totalRows}}
               {{/if}}
             </span>
-            {{text-field value=nameInput placeholderKey="directory.filter_name" class="filter-name no-blur"}}
+            {{input
+              value=(readonly nameInput)
+              input=(action "onFilterChanged" value="target.value")
+              placeholderKey="directory.filter_name"
+              class="filter-name no-blur"
+            }}
           </div>
         </div>
 

GitHub sha: 8ee3d2d9

This commit appears in #11704 which was approved by pmusaraj. It was merged by jjaffeux.