diff --git a/app/assets/javascripts/discourse/app/controllers/users.js b/app/assets/javascripts/discourse/app/controllers/users.js
index 8ebaf7adf6..fe78c4caa2 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 e7f3884e52..05c929f113 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 b406e63a75..77446fbc76 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>