Merge branch 'fix-labels-widget-ubuntu' into 'master'

Fix labels widget update on hide dropdown on Ubuntu

See merge request gitlab-org/gitlab!71874

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

@@ -87,9 +87,6 @@ export default {
       return isDropdownVariantStandalone(this.variant);
     },
   },
-  mounted() {
-    this.$refs.dropdown.show();
-  },
   methods: {
     toggleDropdownContentsCreateView() {
       this.showDropdownContentsCreateView = !this.showDropdownContentsCreateView;
@@ -101,6 +98,9 @@ export default {
         this.$refs.dropdown.$refs.dropdown.$_popper.scheduleUpdate();
       }
     },
+    showDropdown() {
+      this.$refs.dropdown.show();
+    },
     closeDropdown() {
       this.$emit('setLabels', this.localSelectedLabels);
       this.$refs.dropdown.hide();

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

@@ -141,6 +141,9 @@ export default {
     handleCollapsedValueClick() {
       this.$emit('toggleCollapse');
     },
+    showDropdownContents() {
+      this.$refs.dropdownContents.showDropdown();
+    },
     isDropdownVariantSidebar,
     isDropdownVariantStandalone,
     isDropdownVariantEmbedded,
@@ -167,6 +170,7 @@ export default {
         :title="__('Labels')"
         :loading="isLoading"
         :can-edit="allowLabelEdit"
+        @open="showDropdownContents"
       >
         <template #collapsed>
           <dropdown-value
@@ -180,7 +184,7 @@ export default {
             <slot></slot>
           </dropdown-value>
         </template>
-        <template #default="{ edit }">
+        <template #default>
           <dropdown-value
             :disable-labels="labelsSelectInProgress"
             :selected-labels="issuableLabels"
@@ -193,7 +197,7 @@ export default {
             <slot></slot>
           </dropdown-value>
           <dropdown-contents
-            v-if="edit"
+            ref="dropdownContents"
             :dropdown-button-text="dropdownButtonText"
             :allow-multiselect="allowMultiselect"
             :labels-list-title="labelsListTitle"

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

@@ -68,10 +68,11 @@ describe('DropdownContent', () => {
   const findCreateLabelButton = () => wrapper.find('[data-testid="create-label-button"]');
   const findGoBackButton = () => wrapper.find('[data-testid="go-back-button"]');
 
-  it('calls dropdown `show` method on component mount', () => {
+  it('emits `show` for dropdown on call showDropdown', () => {
     createComponent();
+    wrapper.vm.showDropdown();
 
-    expect(showDropdown).toHaveBeenCalled();
+    expect(findDropdown().emitted('show')).toBeUndefined();
   });
 
   it('emits `setLabels` event on dropdown hide', () => {

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

@@ -128,6 +128,13 @@ describe('LabelsSelectRoot', () => {
   it('emits `updateSelectedLabels` event on dropdown contents `setLabels` event if there are labels to update', async () => {
     const label = { id: 'gid://gitlab/ProjectLabel/1' };
     createComponent();
+    wrapper.vm.$refs.dropdownContents = {
+      showDropdown: jest.fn(),
+    };
+    const showSpy = jest.spyOn(wrapper.vm.$refs.dropdownContents, 'showDropdown');
+    findDropdownContents().vm.$refs.dropdown = {
+      show: jest.fn(),
+    };
     await waitForPromises();
 
     expandDropdown();
@@ -135,5 +142,6 @@ describe('LabelsSelectRoot', () => {
 
     findDropdownContents().vm.$emit('setLabels', [label]);
     expect(wrapper.emitted('updateSelectedLabels')).toEqual([[[label]]]);
+    expect(showSpy).toHaveBeenCalled();
   });
 });