From 8ee3d2d954e43dc15bed00cfb58cfd5ee85bf363 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Thu, 14 Jan 2021 10:19:08 +0100
Subject: [PATCH] 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.
---
 .../discourse/app/controllers/users.js        | 30 +++++++++----------
 .../discourse/app/templates/mobile/users.hbs  |  7 ++++-
 .../discourse/app/templates/users.hbs         |  7 ++++-
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/controllers/users.js b/app/assets/javascripts/discourse/app/controllers/users.js
index 8ebaf7adf67..fe78c4caa2c 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 e7f3884e520..05c929f1133 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 b406e63a751..77446fbc764 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>