1 files changed, 21 insertions, 13 deletions
diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list.vue b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list.vue
index 5a49d7c1a90..7f035dddafe 100644
--- a/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list.vue
+++ b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list.vue
@@ -30,7 +30,8 @@ export default {
       page: 1,
       totalItems: 0,
       errorMessage: null,
-      searchTerm: '',
+      userSearchTerm: '',
+      searchValue: '',
     };
   },
   computed: {
@@ -45,16 +46,11 @@ export default {
   },
   methods: {
     loadGroups() {
-      // fetchGroups returns no results for search terms 0 < {length} < 3.
-      // The desired UX is to return the unfiltered results for searches {length} < 3.
-      // Here, we set the search to an empty string if {length} < 3
-      const search = this.searchTerm?.length < MINIMUM_SEARCH_TERM_LENGTH ? '' : this.searchTerm;
-
       this.isLoadingMore = true;
       return fetchGroups(this.groupsPath, {
         page: this.page,
         perPage: this.$options.DEFAULT_GROUPS_PER_PAGE,
-        search,
+        search: this.searchValue,
       })
         .then((response) => {
           const { page, total } = parseIntPagination(normalizeHeaders(response.headers));
@@ -69,12 +65,24 @@ export default {
           this.isLoadingMore = false;
         });
     },
-    onGroupSearch(searchTerm) {
-      // keep a copy of the search term for pagination
-      this.searchTerm = searchTerm;
-      // reset the current page
+    onGroupSearch(userSearchTerm = '') {
+      this.userSearchTerm = userSearchTerm;
+
+      // fetchGroups returns no results for search terms 0 < {length} < 3.
+      // The desired UX is to return the unfiltered results for searches {length} < 3.
+      // Here, we set the search to an empty string '' if {length} < 3
+      const newSearchValue =
+        this.userSearchTerm.length < MINIMUM_SEARCH_TERM_LENGTH ? '' : this.userSearchTerm;
+
+      // don't fetch new results if the search value didn't change.
+      if (newSearchValue === this.searchValue) {
+        return;
+      }
+
+      // reset the page.
       this.page = 1;
-      return this.loadGroups();
+      this.searchValue = newSearchValue;
+      this.loadGroups();
     },
   },
   DEFAULT_GROUPS_PER_PAGE,
@@ -92,7 +100,7 @@ export default {
       debounce="500"
       :placeholder="__('Search by name')"
       :is-loading="isLoadingMore"
-      :value="searchTerm"
+      :value="userSearchTerm"
       @input="onGroupSearch"
     />