@gitlab/ui 61.2.0 → 61.3.0

package/src/components/base/filtered_search/filtered_search_suggestion_list.spec.js

@@ -7,13 +7,14 @@ describe('Filtered search suggestion list component', () => {
   let wrapper;
 
   describe('suggestions API', () => {
-    beforeEach(() => {
+    const createComponent = ({ termsAsTokens = false } = {}) => {
       wrapper = shallowMount(FilteredSearchSuggestionList, {
-        provide: { suggestionsListClass: () => 'custom-class' },
+        provide: { suggestionsListClass: () => 'custom-class', termsAsTokens: () => termsAsTokens },
       });
-    });
+    };
 
     it('has expected public methods', () => {
+      createComponent();
       expect(wrapper.vm.register).toBeInstanceOf(Function);
       expect(wrapper.vm.unregister).toBeInstanceOf(Function);
       expect(wrapper.vm.getValue).toBeInstanceOf(Function);
@@ -24,6 +25,7 @@ describe('Filtered search suggestion list component', () => {
     describe('navigation', () => {
       const stubs = [{ value: 'stub1' }, { value: 'stub2' }, { value: 'stub3' }];
       beforeEach(() => {
+        createComponent();
         stubs.forEach((s) => {
           wrapper.vm.register(s);
         });
@@ -71,6 +73,58 @@ describe('Filtered search suggestion list component', () => {
         expect(wrapper.vm.getValue()).toBe('stub2');
       });
     });
+
+    describe('navigation with termsAsTokens', () => {
+      const stubs = [{ value: 'stub1' }, { value: 'stub2' }, { value: 'stub3' }];
+      beforeEach(() => {
+        createComponent({ termsAsTokens: true });
+        stubs.forEach((s) => {
+          wrapper.vm.register(s);
+        });
+      });
+
+      it('does not select item by default', () => {
+        expect(wrapper.vm.getValue()).toBe(null);
+      });
+
+      it('selects first item on nextItem call', async () => {
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe(stubs[0].value);
+      });
+
+      it('wraps to last item on prevItem call', async () => {
+        wrapper.vm.nextItem();
+        wrapper.vm.prevItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe(stubs[2].value);
+      });
+
+      it('wraps to first item on nextItem call', async () => {
+        stubs.forEach(() => wrapper.vm.nextItem());
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe(stubs[0].value);
+      });
+
+      it('remove selection if suggestion is unregistered', async () => {
+        wrapper.vm.nextItem();
+        await nextTick();
+        wrapper.vm.unregister(stubs[0]);
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe(null);
+      });
+
+      it('selects correct suggestion when item (un)registration is late', async () => {
+        // Initially stub2 is at index 1.
+        await wrapper.setProps({ initialValue: 'stub2' });
+        // Remove item at index 0, so stub2 moves to index 0
+        wrapper.vm.unregister(stubs[0]);
+        await nextTick();
+        // stub2 should still be selected
+        expect(wrapper.vm.getValue()).toBe('stub2');
+      });
+    });
   });
 
   describe('integration tests', () => {
@@ -87,6 +141,17 @@ describe('Filtered search suggestion list component', () => {
       `,
     };
 
+    const createComponent = ({ termsAsTokens = false } = {}) => {
+      wrapper = mount(FilteredSearchSuggestionList, {
+        provide: { suggestionsListClass: () => 'custom-class', termsAsTokens: () => termsAsTokens },
+        slots: {
+          default: list,
+        },
+      });
+    };
+
+    const findActiveSuggestion = () => wrapper.find('.gl-filtered-search-suggestion-active');
+
     beforeAll(() => {
       if (!HTMLElement.prototype.scrollIntoView) {
         HTMLElement.prototype.scrollIntoView = jest.fn();
@@ -99,92 +164,174 @@ describe('Filtered search suggestion list component', () => {
       }
     });
 
-    beforeEach(() => {
-      wrapper = mount(FilteredSearchSuggestionList, {
-        provide: { suggestionsListClass: () => 'custom-class' },
-        slots: {
-          default: list,
-        },
+    describe('with termsAsTokens = false', () => {
+      beforeEach(() => {
+        createComponent();
       });
-    });
 
-    it('selects first suggestion', async () => {
-      wrapper.vm.nextItem();
-      await nextTick();
-      expect(wrapper.vm.getValue()).toBe('One');
-    });
+      it('selects first suggestion', async () => {
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe('One');
+      });
 
-    it('selects second suggestion', async () => {
-      wrapper.vm.nextItem();
-      wrapper.vm.nextItem();
-      await nextTick();
-      expect(wrapper.vm.getValue()).toBe('Two');
-    });
+      it('selects second suggestion', async () => {
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe('Two');
+      });
 
-    it('deselects first suggestion after list end', async () => {
-      wrapper.vm.nextItem();
-      wrapper.vm.nextItem();
-      wrapper.vm.nextItem();
-      wrapper.vm.nextItem();
-      await nextTick();
-      expect(wrapper.vm.getValue()).toBe(null);
-    });
+      it('deselects first suggestion after list end', async () => {
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe(null);
+      });
 
-    it('deselects first suggestion after list start', async () => {
-      wrapper.vm.nextItem();
-      wrapper.vm.prevItem();
-      await nextTick();
-      expect(wrapper.vm.getValue()).toBe(null);
-    });
+      it('deselects first suggestion after list start', async () => {
+        wrapper.vm.nextItem();
+        wrapper.vm.prevItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe(null);
+      });
 
-    it('selects last suggestion in circle when selecting previous item', async () => {
-      wrapper.vm.nextItem();
-      wrapper.vm.prevItem();
-      wrapper.vm.prevItem();
-      await nextTick();
-      expect(wrapper.vm.getValue()).toBe(false);
-    });
+      it('selects last suggestion in circle when selecting previous item', async () => {
+        wrapper.vm.nextItem();
+        wrapper.vm.prevItem();
+        wrapper.vm.prevItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe(false);
+      });
 
-    it('selects first suggestion in circle when selecting next item', async () => {
-      wrapper.vm.nextItem();
-      wrapper.vm.nextItem();
-      wrapper.vm.nextItem();
-      wrapper.vm.nextItem();
-      wrapper.vm.nextItem();
-      await nextTick();
-      expect(wrapper.vm.getValue()).toBe('One');
-    });
+      it('selects first suggestion in circle when selecting next item', async () => {
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe('One');
+      });
 
-    it('highlights suggestion if initial-value is provided', async () => {
-      await wrapper.setProps({ initialValue: 'Two' });
-      expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('Two');
-    });
+      it('highlights suggestion if initial-value is provided', async () => {
+        await wrapper.setProps({ initialValue: 'Two' });
+        expect(findActiveSuggestion().text()).toBe('Two');
+      });
 
-    it('highlights suggestion if initial-value is provided, regardless of case sensitivity', async () => {
-      await wrapper.setProps({ initialValue: 'two' });
-      expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('Two');
-    });
+      it('highlights suggestion if initial-value is provided, regardless of case sensitivity', async () => {
+        await wrapper.setProps({ initialValue: 'two' });
+        expect(findActiveSuggestion().text()).toBe('Two');
+      });
 
-    it('highlights suggestion if initial-value is provided, regardless of falsiness', async () => {
-      await wrapper.setProps({ initialValue: false });
-      expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('Three');
-    });
+      it('highlights suggestion if initial-value is provided, regardless of falsiness', async () => {
+        await wrapper.setProps({ initialValue: false });
+        expect(findActiveSuggestion().text()).toBe('Three');
+      });
 
-    it('highlights first suggestion if initial-value is provided, deselected then selected', async () => {
-      await wrapper.setProps({ initialValue: 'One' });
-      wrapper.vm.prevItem();
-      wrapper.vm.nextItem();
-      await nextTick();
-      expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('One');
-    });
+      it('highlights first suggestion if initial-value is provided, deselected then selected', async () => {
+        await wrapper.setProps({ initialValue: 'One' });
+        wrapper.vm.prevItem();
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(findActiveSuggestion().text()).toBe('One');
+      });
+
+      it('does not highlight anything if initial-value matches nothing', async () => {
+        await wrapper.setProps({ initialValue: 'missing' });
+        expect(findActiveSuggestion().exists()).toBe(false);
+      });
 
-    it('does not highlight anything if initial-value matches nothing', async () => {
-      await wrapper.setProps({ initialValue: 'missing' });
-      expect(wrapper.find('.gl-filtered-search-suggestion-active').exists()).toBe(false);
+      it('applies the injected suggestion-list-class to the dropdown', () => {
+        expect(wrapper.classes()).toContain('custom-class');
+      });
     });
 
-    it('applies the injected suggestion-list-class to the dropdown', () => {
-      expect(wrapper.classes()).toContain('custom-class');
+    describe('with termsAsTokens = true', () => {
+      beforeEach(() => {
+        createComponent({ termsAsTokens: true });
+      });
+
+      it('selects first suggestion', async () => {
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe('One');
+      });
+
+      it('selects second suggestion', async () => {
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe('Two');
+      });
+
+      it('wraps to first suggestion after list end', async () => {
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe('One');
+      });
+
+      it('wraps to last suggestion before list start', async () => {
+        wrapper.vm.nextItem();
+        wrapper.vm.prevItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe(false);
+      });
+
+      it('selects second-to-last suggestion in circle when selecting previous item', async () => {
+        wrapper.vm.nextItem();
+        wrapper.vm.prevItem();
+        wrapper.vm.prevItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe('Two');
+      });
+
+      it('selects second suggestion in circle when selecting next item', async () => {
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe('Two');
+      });
+
+      it('highlights suggestion if initial-value is provided', async () => {
+        await wrapper.setProps({ initialValue: 'Two' });
+        expect(findActiveSuggestion().text()).toBe('Two');
+      });
+
+      it('highlights suggestion if initial-value is provided, regardless of case sensitivity', async () => {
+        await wrapper.setProps({ initialValue: 'two' });
+        expect(findActiveSuggestion().text()).toBe('Two');
+      });
+
+      it('highlights suggestion if initial-value is provided, regardless of falsiness', async () => {
+        await wrapper.setProps({ initialValue: false });
+        expect(findActiveSuggestion().text()).toBe('Three');
+      });
+
+      it('highlights first suggestion if initial-value is provided, deselected then selected', async () => {
+        await wrapper.setProps({ initialValue: 'One' });
+        wrapper.vm.prevItem();
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(findActiveSuggestion().text()).toBe('One');
+      });
+
+      it('does not highlight anything if initial-value matches nothing', async () => {
+        await wrapper.setProps({ initialValue: 'missing' });
+        expect(findActiveSuggestion().exists()).toBe(false);
+      });
+
+      it('applies the injected suggestion-list-class to the dropdown', () => {
+        expect(wrapper.classes()).toContain('custom-class');
+      });
     });
   });
 });

package/src/components/base/filtered_search/filtered_search_suggestion_list.vue

@@ -6,7 +6,7 @@ const NO_ACTIVE_ITEM = -2;
 
 export default {
   name: 'GlFilteredSearchSuggestionList',
-  inject: ['suggestionsListClass'],
+  inject: ['suggestionsListClass', 'termsAsTokens'],
   provide() {
     return {
       filteredSearchSuggestionListInstance: this,
@@ -40,7 +40,7 @@ export default {
       return this.registeredItems[this.initialActiveIdx];
     },
     activeItem() {
-      if (this.activeIdx === NO_ACTIVE_ITEM) return null;
+      if (!this.termsAsTokens() && this.activeIdx === NO_ACTIVE_ITEM) return null;
       if (this.activeIdx === DEFER_TO_INITIAL_VALUE) return this.initialActiveItem;
       return this.registeredItems[this.activeIdx];
     },
@@ -76,15 +76,24 @@ export default {
       }
     },
     nextItem() {
-      this.stepItem(1, this.registeredItems.length - 1);
+      if (this.termsAsTokens()) {
+        this.stepItem(1);
+      } else {
+        this.stepItem(1, this.registeredItems.length - 1);
+      }
     },
     prevItem() {
-      this.stepItem(-1, 0);
+      if (this.termsAsTokens()) {
+        this.stepItem(-1);
+      } else {
+        this.stepItem(-1, 0);
+      }
     },
     stepItem(direction, endIdx) {
       if (
-        this.activeIdx === endIdx ||
-        (this.activeIdx === DEFER_TO_INITIAL_VALUE && this.initialActiveIdx === endIdx)
+        !this.termsAsTokens() &&
+        (this.activeIdx === endIdx ||
+          (this.activeIdx === DEFER_TO_INITIAL_VALUE && this.initialActiveIdx === endIdx))
       ) {
         // The user wants to move past the end of the list, so ensure nothing is selected.
         this.activeIdx = NO_ACTIVE_ITEM;

package/src/components/base/filtered_search/filtered_search_term.spec.js

@@ -1,7 +1,8 @@
 import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
+import GlToken from '../token/token.vue';
 import FilteredSearchTerm from './filtered_search_term.vue';
-import { INTENT_ACTIVATE_PREVIOUS } from './filtered_search_utils';
+import { INTENT_ACTIVATE_PREVIOUS, TERM_TOKEN_TYPE } from './filtered_search_utils';
 
 const availableTokens = [
   { type: 'foo', title: 'test1-foo', token: 'stub', icon: 'eye' },
@@ -9,6 +10,8 @@ const availableTokens = [
   { type: 'baz', title: 'test1-baz', token: 'stub', icon: 'eye' },
 ];
 
+const pointerClass = 'gl-cursor-pointer';
+
 describe('Filtered search term', () => {
   let wrapper;
 
@@ -21,13 +24,23 @@ describe('Filtered search term', () => {
 
   const segmentStub = {
     name: 'gl-filtered-search-token-segment-stub',
-    template: '<div><slot name="view"></slot><slot name="suggestions"></slot></div>',
-    props: ['searchInputAttributes', 'isLastToken', 'currentValue', 'viewOnly', 'options'],
+    template: '<div><slot v-if="!active" name="view"></slot><slot name="suggestions"></slot></div>',
+    props: [
+      'searchInputAttributes',
+      'isLastToken',
+      'currentValue',
+      'viewOnly',
+      'options',
+      'active',
+    ],
   };
 
-  const createComponent = (props) => {
+  const createComponent = ({ termsAsTokens = false, ...props } = {}) => {
     wrapper = shallowMount(FilteredSearchTerm, {
       propsData: { ...defaultProps, ...props },
+      provide: {
+        termsAsTokens: () => termsAsTokens,
+      },
       stubs: {
         'gl-filtered-search-token-segment': segmentStub,
       },
@@ -36,14 +49,24 @@ describe('Filtered search term', () => {
 
   const findSearchInput = () => wrapper.find('input');
   const findTokenSegmentComponent = () => wrapper.findComponent(segmentStub);
+  const findToken = () => wrapper.findComponent(GlToken);
 
   it('renders value in inactive mode', () => {
     createComponent({ value: { data: 'test-value' } });
     expect(wrapper.html()).toMatchSnapshot();
   });
 
-  it('renders input with value in active mode', () => {
+  it('renders token in inactive mode with termsAsTokens', () => {
+    createComponent({ value: { data: 'test value' }, termsAsTokens: true });
+    expect(findToken().exists()).toBe(true);
+    expect(findToken().props().viewOnly).toBe(false);
+    expect(findToken().classes()).toContain(pointerClass);
+    expect(findToken().text()).toBe('test value');
+  });
+
+  it('renders nothing with value in active mode (delegates to segment)', () => {
     createComponent({ value: { data: 'test-value' }, active: true });
+    expect(wrapper.text()).not.toContain('test-value');
     expect(wrapper.html()).toMatchSnapshot();
   });
 
@@ -60,20 +83,45 @@ describe('Filtered search term', () => {
     expect(findTokenSegmentComponent().props('options')).toHaveLength(2);
   });
 
+  it('suggests text search when termsAsTokens=true', async () => {
+    createComponent({
+      availableTokens,
+      active: true,
+      value: { data: 'foo' },
+      termsAsTokens: true,
+    });
+
+    await nextTick();
+
+    expect(findTokenSegmentComponent().props('options')).toEqual([
+      expect.objectContaining({
+        value: 'foo',
+        title: 'test1-foo',
+      }),
+      expect.objectContaining({
+        value: TERM_TOKEN_TYPE,
+        title: 'Search for this text',
+      }),
+    ]);
+  });
+
   it.each`
-    originalEvent   | emittedEvent    | payload
-    ${'activate'}   | ${'activate'}   | ${undefined}
-    ${'deactivate'} | ${'deactivate'} | ${undefined}
-    ${'split'}      | ${'split'}      | ${undefined}
-    ${'submit'}     | ${'submit'}     | ${undefined}
-    ${'complete'}   | ${'replace'}    | ${{ type: undefined }}
-    ${'backspace'}  | ${'destroy'}    | ${{ intent: INTENT_ACTIVATE_PREVIOUS }}
+    originalEvent   | originalPayload    | emittedEvent    | payload
+    ${'activate'}   | ${undefined}       | ${'activate'}   | ${undefined}
+    ${'deactivate'} | ${undefined}       | ${'deactivate'} | ${undefined}
+    ${'split'}      | ${'foo'}           | ${'split'}      | ${'foo'}
+    ${'submit'}     | ${undefined}       | ${'submit'}     | ${undefined}
+    ${'previous'}   | ${undefined}       | ${'previous'}   | ${undefined}
+    ${'next'}       | ${undefined}       | ${'next'}       | ${undefined}
+    ${'complete'}   | ${'foo'}           | ${'replace'}    | ${{ type: 'foo' }}
+    ${'complete'}   | ${TERM_TOKEN_TYPE} | ${'complete'}   | ${undefined}
+    ${'backspace'}  | ${undefined}       | ${'destroy'}    | ${{ intent: INTENT_ACTIVATE_PREVIOUS }}
   `(
     'emits $emittedEvent when token segment emits $originalEvent',
-    async ({ originalEvent, emittedEvent, payload }) => {
+    async ({ originalEvent, originalPayload, emittedEvent, payload }) => {
       createComponent({ active: true, value: { data: 'something' } });
 
-      findTokenSegmentComponent().vm.$emit(originalEvent);
+      findTokenSegmentComponent().vm.$emit(originalEvent, originalPayload);
 
       await nextTick();
 
@@ -117,6 +165,17 @@ describe('Filtered search term', () => {
     expect(findTokenSegmentComponent().props('viewOnly')).toBe(false);
   });
 
+  it('sets viewOnly prop and removes pointer class on token when termsAsTokens=true', () => {
+    createComponent({
+      value: { data: 'foo' },
+      viewOnly: true,
+      termsAsTokens: true,
+    });
+
+    expect(findToken().props().viewOnly).toBe(true);
+    expect(findToken().classes()).not.toContain(pointerClass);
+  });
+
   it('adds `searchInputAttributes` prop to search term input', () => {
     createComponent({
       placeholder: 'placeholder-stub',

package/src/components/base/filtered_search/filtered_search_term.vue

@@ -1,12 +1,23 @@
 <script>
+import GlToken from '../token/token.vue';
+import { stopEvent } from '../../../utils/utils';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
-import { INTENT_ACTIVATE_PREVIOUS, match, tokenToOption } from './filtered_search_utils';
+import {
+  INTENT_ACTIVATE_PREVIOUS,
+  TERM_TOKEN_TYPE,
+  TOKEN_CLOSE_SELECTOR,
+  match,
+  tokenToOption,
+  termTokenDefinition,
+} from './filtered_search_utils';
 
 export default {
   name: 'GlFilteredSearchTerm',
   components: {
     GlFilteredSearchTokenSegment,
+    GlToken,
   },
+  inject: ['termsAsTokens'],
   inheritAttrs: false,
   props: {
     /**
@@ -67,6 +78,14 @@ export default {
       default: 'end',
       validator: (value) => ['start', 'end'].includes(value),
     },
+    /**
+     * The title of the text search option. Ignored unless termsAsTokens is enabled.
+     */
+    searchTextOptionLabel: {
+      type: String,
+      required: false,
+      default: termTokenDefinition.title,
+    },
     viewOnly: {
       type: Boolean,
       required: false,
@@ -74,10 +93,22 @@ export default {
     },
   },
   computed: {
+    showInput() {
+      return this.termsAsTokens() || Boolean(this.placeholder);
+    },
+    showToken() {
+      return this.termsAsTokens() && Boolean(this.value.data);
+    },
     suggestedTokens() {
-      return this.availableTokens
-        .filter((token) => match(token.title, this.value.data))
-        .map(tokenToOption);
+      const tokens = this.availableTokens.filter((token) => match(token.title, this.value.data));
+      if (this.termsAsTokens() && this.value.data) {
+        tokens.push({
+          ...termTokenDefinition,
+          title: this.searchTextOptionLabel,
+        });
+      }
+
+      return tokens.map(tokenToOption);
     },
     internalValue: {
       get() {
@@ -93,6 +124,9 @@ export default {
         this.$emit('input', { data });
       },
     },
+    eventListeners() {
+      return this.viewOnly ? {} : { mousedown: this.destroyByClose };
+    },
   },
   methods: {
     onBackspace() {
@@ -105,6 +139,21 @@ export default {
        */
       this.$emit('destroy', { intent: INTENT_ACTIVATE_PREVIOUS });
     },
+    destroyByClose(event) {
+      if (event.target.closest(TOKEN_CLOSE_SELECTOR)) {
+        stopEvent(event);
+        this.$emit('destroy');
+      }
+    },
+    onComplete(type) {
+      if (type === TERM_TOKEN_TYPE) {
+        // We've completed this term token
+        this.$emit('complete');
+      } else {
+        // We're changing the current token type
+        this.$emit('replace', { type });
+      }
+    },
   },
 };
 </script>
@@ -134,6 +183,7 @@ export default {
 
     <!--
       Emitted when Space is pressed in-between term text.
+      Not emitted when termsAsTokens is true.
       @event split
       @property {array} newTokens Token configurations
     -->
@@ -152,7 +202,7 @@ export default {
       :options="suggestedTokens"
       @activate="$emit('activate')"
       @deactivate="$emit('deactivate')"
-      @complete="$emit('replace', { type: $event })"
+      @complete="onComplete"
       @backspace="onBackspace"
       @submit="$emit('submit')"
       @split="$emit('split', $event)"
@@ -160,8 +210,16 @@ export default {
       @next="$emit('next')"
     >
       <template #view>
+        <gl-token
+          v-if="showToken"
+          :class="{ 'gl-cursor-pointer': !viewOnly }"
+          :view-only="viewOnly"
+          v-on="eventListeners"
+          >{{ value.data }}</gl-token
+        >
+
         <input
-          v-if="placeholder"
+          v-else-if="showInput"
           v-bind="searchInputAttributes"
           class="gl-filtered-search-term-input"
           :class="{ 'gl-bg-gray-10': viewOnly }"

package/src/components/base/filtered_search/filtered_search_token.spec.js

@@ -44,6 +44,7 @@ describe('Filtered search token', () => {
       provide: {
         portalName: 'fake target',
         alignSuggestions: function fakeAlignSuggestions() {},
+        termsAsTokens: () => false,
       },
       stubs: {
         Portal: {