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.
This commit is contained in:
Alan Guo Xiang Tan 2023-12-22 16:26:44 +08:00 committed by GitHub
parent 9d658591d6
commit 5668866031
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 1 deletions

View File

@ -15,7 +15,7 @@
@filterSelected={{this.filterSelected}} @filterSelected={{this.filterSelected}}
@filterUnselected={{this.filterUnselected}} @filterUnselected={{this.filterUnselected}}
@closeModal={{@closeModal}} @closeModal={{@closeModal}}
@loading={{this.tagsLoading}} @loading={{(or this.tagsLoading this.disableFiltering)}}
class="sidebar__edit-navigation-menu__tags-modal" class="sidebar__edit-navigation-menu__tags-modal"
> >
{{#if this.tagsLoading}} {{#if this.tagsLoading}}

View File

@ -16,6 +16,7 @@ export default class extends Component {
@tracked onlyUnSelected = false; @tracked onlyUnSelected = false;
@tracked tags = []; @tracked tags = [];
@tracked tagsLoading; @tracked tagsLoading;
@tracked disableFiltering;
@tracked selectedTags = [...this.currentUser.sidebarTagNames]; @tracked selectedTags = [...this.currentUser.sidebarTagNames];
constructor() { constructor() {
@ -50,6 +51,7 @@ export default class extends Component {
}) })
.finally(() => { .finally(() => {
this.tagsLoading = false; this.tagsLoading = false;
this.disableFiltering = false;
}); });
} }
@ -110,6 +112,7 @@ export default class extends Component {
@action @action
onFilterInput(filter) { onFilterInput(filter) {
this.disableFiltering = true;
discourseDebounce(this, this.#performFiltering, filter, INPUT_DELAY); discourseDebounce(this, this.#performFiltering, filter, INPUT_DELAY);
} }