diff --git a/ee/app/assets/javascripts/boards/components/iteration_select.vue b/ee/app/assets/javascripts/boards/components/iteration_select.vue index a932fe1b00898a6e939dbe98516ff6f1d4b82ca0..830ef50b9ecc98f18b91bcff1ddab4cc2ad9ae21 100644 --- a/ee/app/assets/javascripts/boards/components/iteration_select.vue +++ b/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; diff --git a/ee/app/assets/javascripts/boards/components/labels_select.vue b/ee/app/assets/javascripts/boards/components/labels_select.vue index 0d84b2c874d111c1d2d55d7f36d5b50ccfeefc0e..003ee45fc23ee2b8785ea975d9d02c26bf204dfd 100644 --- a/ee/app/assets/javascripts/boards/components/labels_select.vue +++ b/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; diff --git a/ee/spec/frontend/boards/components/labels_select_spec.js b/ee/spec/frontend/boards/components/labels_select_spec.js index facde6de8baf2ad4c11dd55cda1bd9847f11aadd..f8c0e2bd0faef01df9711710e6d5563b502d881f 100644 --- a/ee/spec/frontend/boards/components/labels_select_spec.js +++ b/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` diff --git a/ee/spec/frontend/boards/iteration_select_spec.js b/ee/spec/frontend/boards/iteration_select_spec.js index 1661e0e19a7b5db9c27ed89a73ec6a87da80d93c..7cc9125c95b3e1866aa8bbd9a8e500bdcb66bc0a 100644 --- a/ee/spec/frontend/boards/iteration_select_spec.js +++ b/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');