Merge branch 'ss/fix-base-token-double-fetch' into 'master'

Add guard to base token handleInput

See merge request gitlab-org/gitlab!71339

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue

@@ -148,7 +148,8 @@ export default {
   methods: {
     handleInput: debounce(function debouncedSearch({ data }) {
       this.searchKey = data;
-      if (!this.suggestionsLoading) {
+
+      if (!this.suggestionsLoading && !this.activeTokenValue) {
         this.$emit('fetch-suggestions', data);
       }
     }, DEBOUNCE_DELAY),

spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js

@@ -206,26 +206,50 @@ describe('BaseToken', () => {
     describe('events', () => {
       let wrapperWithNoStubs;
 
-      beforeEach(() => {
-        wrapperWithNoStubs = createComponent({
-          stubs: { Portal: true },
-        });
-      });
-
       afterEach(() => {
         wrapperWithNoStubs.destroy();
       });
 
-      it('emits `fetch-suggestions` event on component after a delay when component emits `input` event', async () => {
-        jest.useFakeTimers();
+      describe('when activeToken has been selected', () => {
+        beforeEach(() => {
+          wrapperWithNoStubs = createComponent({
+            props: {
+              ...mockProps,
+              getActiveTokenValue: () => ({ title: '' }),
+              suggestionsLoading: true,
+            },
+            stubs: { Portal: true },
+          });
+        });
+        it('does not emit `fetch-suggestions` event on component after a delay when component emits `input` event', async () => {
+          jest.useFakeTimers();
 
-        wrapperWithNoStubs.find(GlFilteredSearchToken).vm.$emit('input', { data: 'foo' });
-        await wrapperWithNoStubs.vm.$nextTick();
+          wrapperWithNoStubs.find(GlFilteredSearchToken).vm.$emit('input', { data: 'foo' });
+          await wrapperWithNoStubs.vm.$nextTick();
 
-        jest.runAllTimers();
+          jest.runAllTimers();
 
-        expect(wrapperWithNoStubs.emitted('fetch-suggestions')).toBeTruthy();
-        expect(wrapperWithNoStubs.emitted('fetch-suggestions')[2]).toEqual(['foo']);
+          expect(wrapperWithNoStubs.emitted('fetch-suggestions')).toEqual([['']]);
+        });
+      });
+
+      describe('when activeToken has not been selected', () => {
+        beforeEach(() => {
+          wrapperWithNoStubs = createComponent({
+            stubs: { Portal: true },
+          });
+        });
+        it('emits `fetch-suggestions` event on component after a delay when component emits `input` event', async () => {
+          jest.useFakeTimers();
+
+          wrapperWithNoStubs.find(GlFilteredSearchToken).vm.$emit('input', { data: 'foo' });
+          await wrapperWithNoStubs.vm.$nextTick();
+
+          jest.runAllTimers();
+
+          expect(wrapperWithNoStubs.emitted('fetch-suggestions')).toBeTruthy();
+          expect(wrapperWithNoStubs.emitted('fetch-suggestions')[2]).toEqual(['foo']);
+        });
       });
     });
   });