Merge branch...

Merge branch '365380-toggling-edit-button-for-labels-select-dropdown-for-board-configuration-no-longer-closes' into 'master' 

Fix toggle behavior for board iteration and label edits

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/149443



Merged-by: Kushal Pandya <kushal@gitlab.com>
Approved-by: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Approved-by: Jay Montal <jmontal@gitlab.com>
Approved-by: Kushal Pandya <kushal@gitlab.com>
Co-authored-by: Chad Lavimoniere <clavimoniere@gitlab.com>

ee/app/assets/javascripts/boards/components/iteration_select.vue

@@ -169,7 +169,8 @@ export default {
         this.isEditing = true;
         this.showDropdown();
       } else {
-        this.hideDropdown();
+        this.isEditing = false;
+        this.isDropdownShowing = false;
       }
     },
     showDropdown() {
@@ -178,7 +179,6 @@ export default {
     },
     hideDropdown() {
       this.isEditing = false;
-      this.isDropdownShowing = false;
     },
     setSearch(search) {
       this.search = search;

ee/app/assets/javascripts/boards/components/labels_select.vue

@@ -40,6 +40,7 @@ export default {
       labels: [],
       selected: this.board.labels,
       isEditing: false,
+      isDropdownShowing: false,
       showDropdownContentsCreateView: false,
     };
   },
@@ -122,18 +123,20 @@ export default {
       this.$emit('set-labels', labels);
     },
     toggleEdit() {
-      if (!this.isEditing) {
+      if (!this.isEditing && !this.isDropdownShowing) {
+        this.isEditing = true;
         this.showDropdown();
       } else {
-        this.hideDropdown();
+        this.isEditing = false;
+        this.isDropdownShowing = false;
       }
     },
     showDropdown() {
-      this.isEditing = true;
       this.$refs.editDropdown.showDropdown();
       debounce(() => {
         this.setFocus();
       }, 50)();
+      this.isDropdownShowing = true;
     },
     hideDropdown() {
       this.isEditing = false;

ee/spec/frontend/boards/components/labels_select_spec.js

@@ -128,6 +128,16 @@ describe('Labels select component', () => {
     it('shows Edit button if true', () => {
       expect(findEditButton().exists()).toBe(true);
     });
+
+    it('toggles edit state when edit button is clicked', async () => {
+      findEditButton().vm.$emit('click');
+      await nextTick();
+      expect(findDropdown().isVisible()).toBe(true);
+
+      findEditButton().vm.$emit('click');
+      await nextTick();
+      expect(findDropdown().isVisible()).toBe(false);
+    });
   });
 
   it.each`

ee/spec/frontend/boards/iteration_select_spec.js

@@ -109,6 +109,16 @@ describe('Iteration select component', () => {
       expect(findEditButton().exists()).toBe(true);
     });
 
+    it('toggles edit state when edit button is clicked', async () => {
+      findEditButton().vm.$emit('click');
+      await nextTick();
+      expect(findDropdown().isVisible()).toBe(true);
+
+      findEditButton().vm.$emit('click');
+      await nextTick();
+      expect(findDropdown().isVisible()).toBe(false);
+    });
+
     it('renders cadence when Any in cadence is selected', async () => {
       findEditButton().vm.$emit('click');