Merge branch...

Merge branch '346902-on-labels-widget-search-input-is-not-cleared-on-label-selection-2' into 'master'

Resolve "On labels widget, search input is not cleared on label selection"

See merge request gitlab-org/gitlab!75629

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue

@@ -172,6 +172,13 @@ export default {
     showDropdown() {
       this.$refs.dropdown.show();
     },
+    clearSearch() {
+      if (!this.allowMultiselect || this.isStandalone) {
+        return;
+      }
+      this.searchKey = '';
+      this.setFocus();
+    },
   },
 };
 </script>
@@ -210,6 +217,7 @@ export default {
         :attr-workspace-path="attrWorkspacePath"
         :label-create-type="labelCreateType"
         @hideCreateView="toggleDropdownContent"
+        @input="clearSearch"
       />
     </template>
     <template #footer>

spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_spec.js

@@ -4,12 +4,12 @@ import { DropdownVariant } from '~/vue_shared/components/sidebar/labels_select_w
 import DropdownContents from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue';
 import DropdownContentsCreateView from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue';
 import DropdownContentsLabelsView from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue';
-import DropdownHeader from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_header.vue';
 import DropdownFooter from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_footer.vue';
 
 import { mockLabels } from './mock_data';
 
 const showDropdown = jest.fn();
+const focusInput = jest.fn();
 
 const GlDropdownStub = {
   template: `
@@ -25,6 +25,15 @@ const GlDropdownStub = {
   },
 };
 
+const DropdownHeaderStub = {
+  template: `
+    <div>Hello, I am a header</div>
+  `,
+  methods: {
+    focusInput,
+  },
+};
+
 describe('DropdownContent', () => {
   let wrapper;
 
@@ -52,6 +61,7 @@ describe('DropdownContent', () => {
       },
       stubs: {
         GlDropdown: GlDropdownStub,
+        DropdownHeader: DropdownHeaderStub,
       },
     });
   };
@@ -62,7 +72,7 @@ describe('DropdownContent', () => {
 
   const findCreateView = () => wrapper.findComponent(DropdownContentsCreateView);
   const findLabelsView = () => wrapper.findComponent(DropdownContentsLabelsView);
-  const findDropdownHeader = () => wrapper.findComponent(DropdownHeader);
+  const findDropdownHeader = () => wrapper.findComponent(DropdownHeaderStub);
   const findDropdownFooter = () => wrapper.findComponent(DropdownFooter);
   const findDropdown = () => wrapper.findComponent(GlDropdownStub);
 
@@ -135,11 +145,20 @@ describe('DropdownContent', () => {
   it('sets searchKey for labels view on input event from header', async () => {
     createComponent();
 
-    expect(wrapper.vm.searchKey).toEqual('');
+    expect(findLabelsView().props('searchKey')).toBe('');
     findDropdownHeader().vm.$emit('input', '123');
     await nextTick();
 
-    expect(findLabelsView().props('searchKey')).toEqual('123');
+    expect(findLabelsView().props('searchKey')).toBe('123');
+  });
+
+  it('clears and focuses search input on selecting a label', () => {
+    createComponent();
+    findDropdownHeader().vm.$emit('input', '123');
+    findLabelsView().vm.$emit('input', []);
+
+    expect(findLabelsView().props('searchKey')).toBe('');
+    expect(focusInput).toHaveBeenCalled();
   });
 
   describe('Create view', () => {