From 5668866031bbff83ef5cef0e4dba8ebd79edb010 Mon Sep 17 00:00:00 2001
From: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Date: Fri, 22 Dec 2023 16:26:44 +0800
Subject: [PATCH] UX: Disable dropdown when filtering in edit nav menu tags
 modal (#25010)

Why this change?

The `Editing sidebar tags navigation allows a user to filter the tag in the modal by selection` system test was flaky
when we were doing `modal.filter("").filter_by_unselected`. The
hypothesis here is that the filtering is debounced before issue a
request to load the new tags and the dropdown is only disabled in the
debounced function. Thereforethere is a chance that when
`modal.filter_by_unselected` runs, it is selecting a row against a
disabled dropdown which results in a noop.

What does this change do?

When filtering using the input in the modal, we will now disabled the
dropdown until the filtering completes which will then re-enable the
dropdown.
---
 .../app/components/sidebar/edit-navigation-menu/tags-modal.hbs | 2 +-
 .../app/components/sidebar/edit-navigation-menu/tags-modal.js  | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/tags-modal.hbs b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/tags-modal.hbs
index 919b8520587..4d07b3621e5 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/tags-modal.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/tags-modal.hbs
@@ -15,7 +15,7 @@
   @filterSelected={{this.filterSelected}}
   @filterUnselected={{this.filterUnselected}}
   @closeModal={{@closeModal}}
-  @loading={{this.tagsLoading}}
+  @loading={{(or this.tagsLoading this.disableFiltering)}}
   class="sidebar__edit-navigation-menu__tags-modal"
 >
   {{#if this.tagsLoading}}
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/tags-modal.js b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/tags-modal.js
index d1158bf86a2..4ddbc7e7eb9 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/tags-modal.js
+++ b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/tags-modal.js
@@ -16,6 +16,7 @@ export default class extends Component {
   @tracked onlyUnSelected = false;
   @tracked tags = [];
   @tracked tagsLoading;
+  @tracked disableFiltering;
   @tracked selectedTags = [...this.currentUser.sidebarTagNames];
 
   constructor() {
@@ -50,6 +51,7 @@ export default class extends Component {
       })
       .finally(() => {
         this.tagsLoading = false;
+        this.disableFiltering = false;
       });
   }
 
@@ -110,6 +112,7 @@ export default class extends Component {
 
   @action
   onFilterInput(filter) {
+    this.disableFiltering = true;
     discourseDebounce(this, this.#performFiltering, filter, INPUT_DELAY);
   }