@gitlab/ui 64.10.0 → 64.10.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [64.10.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.10.0...v64.10.1) (2023-06-14)
+
+
+### Bug Fixes
+
+* **GlCollapsibleListbox:** listbox stays open ([a83355d](https://gitlab.com/gitlab-org/gitlab-ui/commit/a83355d527c483ca6bd6587da64f565ef118b8da))
+
 # [64.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.9.0...v64.10.0) (2023-06-14)
 
 

package/dist/components/base/new_dropdowns/listbox/listbox.js

@@ -329,7 +329,7 @@ var script = {
   },
   computed: {
     listboxTag() {
-      if (this.items.length === 0 || isOption(this.items[0])) return 'ul';
+      if (!this.hasItems || isOption(this.items[0])) return 'ul';
       return 'div';
     },
     listboxClasses() {
@@ -345,6 +345,9 @@ var script = {
     flattenedOptions() {
       return flattenedOptions(this.items);
     },
+    hasItems() {
+      return this.items.length > 0;
+    },
     listboxToggleText() {
       if (!this.toggleText) {
         if (!this.multiple && this.selectedValues.length) {
@@ -384,6 +387,17 @@ var script = {
       if (!this.resetButtonLabel) {
         return false;
       }
+      if (!this.multiple) {
+        return false;
+      }
+
+      /**
+       * if dropdown has no items
+       * reset all should be hidden
+       */
+      if (!this.hasItems) {
+        return false;
+      }
       if (this.multiple) {
         return this.selected.length > 0;
       }
@@ -396,6 +410,14 @@ var script = {
       if (!this.multiple) {
         return false;
       }
+
+      /**
+       * if dropdown has no items
+       * select all should be hidden
+       */
+      if (!this.hasItems) {
+        return false;
+      }
       return this.selected.length === 0;
     },
     showIntersectionObserver() {
@@ -614,7 +636,6 @@ var script = {
        * @event reset
        */
       this.$emit('reset');
-      this.closeAndFocus();
     },
     onSelectAllButtonClicked() {
       /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "64.10.0",
+  "version": "64.10.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/new_dropdowns/listbox/listbox.spec.js

@@ -179,6 +179,15 @@ describe('GlCollapsibleListbox', () => {
         await nextTick();
         expect(wrapper.emitted('select')[0][0]).toEqual(mockOptions[2].value);
       });
+
+      it('close dropdown for single selection', () => {
+        jest.spyOn(wrapper.vm, 'closeAndFocus');
+        expect(wrapper.vm.closeAndFocus).not.toHaveBeenCalled();
+
+        findListboxItems().at(2).vm.$emit('select', true);
+
+        expect(wrapper.vm.closeAndFocus).toHaveBeenCalled();
+      });
     });
 
     describe('with groups', () => {
@@ -475,17 +484,47 @@ describe('GlCollapsibleListbox', () => {
       expect(wrapper).toHaveLoggedVueErrors();
     });
 
+    it.each`
+      multiple
+      ${true}
+      ${false}
+    `(
+      'shows the reset button if the label is provided and the selection is not empty and mode if multiple mode is $multiple',
+      ({ multiple }) => {
+        buildWrapper({
+          headerText: 'Select assignee',
+          resetButtonLabel: 'Unassign',
+          selected: mockOptions[1].value,
+          items: mockOptions,
+          multiple,
+        });
+
+        expect(findResetButton().exists()).toBe(multiple);
+      }
+    );
+
     it('shows the reset button if the label is provided and the selection is not empty', () => {
       buildWrapper({
         headerText: 'Select assignee',
         resetButtonLabel: 'Unassign',
         selected: mockOptions[1].value,
         items: mockOptions,
+        multiple: true,
       });
-      const button = findResetButton();
 
-      expect(button.exists()).toBe(true);
-      expect(button.text()).toBe('Unassign');
+      expect(findResetButton().text()).toBe('Unassign');
+    });
+
+    it('hides reset button if dropdown has no items', () => {
+      buildWrapper({
+        headerText: 'Select assignee',
+        resetButtonLabel: 'Unassign',
+        selected: mockOptions[1].value,
+        items: [],
+        multiple: true,
+      });
+
+      expect(findResetButton().exists()).toBe(false);
     });
 
     it.each`
@@ -503,12 +542,13 @@ describe('GlCollapsibleListbox', () => {
       expect(findResetButton().exists()).toBe(false);
     });
 
-    it('on click, emits the reset event and calls closeAndFocus()', () => {
+    it('on click, emits the reset event does not and call closeAndFocus() for multiple mode', () => {
       buildWrapper({
         headerText: 'Select assignee',
         resetButtonLabel: 'Unassign',
         selected: mockOptions[1].value,
         items: mockOptions,
+        multiple: true,
       });
       jest.spyOn(wrapper.vm, 'closeAndFocus');
 
@@ -518,7 +558,7 @@ describe('GlCollapsibleListbox', () => {
       findResetButton().trigger('click');
 
       expect(wrapper.emitted('reset')).toHaveLength(1);
-      expect(wrapper.vm.closeAndFocus).toHaveBeenCalled();
+      expect(wrapper.vm.closeAndFocus).not.toHaveBeenCalled();
     });
   });
 
@@ -533,12 +573,12 @@ describe('GlCollapsibleListbox', () => {
     });
 
     it.each`
-      multiple | expectedResult
-      ${false} | ${false}
-      ${true}  | ${true}
+      multiple | resetVisible | selectAllVisible
+      ${false} | ${false}     | ${false}
+      ${true}  | ${false}     | ${true}
     `(
       'shows the select all button if the label is provided and the selection is empty and multiple option is $multiple',
-      ({ multiple, expectedResult }) => {
+      ({ multiple, resetVisible, selectAllVisible }) => {
         buildWrapper({
           headerText: 'Select assignee',
           resetButtonLabel: 'Unassign',
@@ -548,11 +588,23 @@ describe('GlCollapsibleListbox', () => {
           multiple,
         });
 
-        expect(findResetButton().exists()).toBe(!expectedResult);
-        expect(findSelectAllButton().exists()).toBe(expectedResult);
+        expect(findResetButton().exists()).toBe(resetVisible);
+        expect(findSelectAllButton().exists()).toBe(selectAllVisible);
       }
     );
 
+    it('hides select all button if dropdown has no items', () => {
+      buildWrapper({
+        headerText: 'Select assignee',
+        resetButtonLabel: 'Unassign',
+        showSelectAllButtonLabel: 'Select All',
+        items: [],
+        multiple: true,
+      });
+
+      expect(findSelectAllButton().exists()).toBe(false);
+    });
+
     it('has the label text "Select All" if the label is provided and the selection is empty', () => {
       buildWrapper({
         headerText: 'Select assignee',

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -345,7 +345,7 @@ export default {
   },
   computed: {
     listboxTag() {
-      if (this.items.length === 0 || isOption(this.items[0])) return 'ul';
+      if (!this.hasItems || isOption(this.items[0])) return 'ul';
       return 'div';
     },
     listboxClasses() {
@@ -361,6 +361,9 @@ export default {
     flattenedOptions() {
       return flattenedOptions(this.items);
     },
+    hasItems() {
+      return this.items.length > 0;
+    },
     listboxToggleText() {
       if (!this.toggleText) {
         if (!this.multiple && this.selectedValues.length) {
@@ -394,6 +397,19 @@ export default {
       if (!this.resetButtonLabel) {
         return false;
       }
+
+      if (!this.multiple) {
+        return false;
+      }
+
+      /**
+       * if dropdown has no items
+       * reset all should be hidden
+       */
+      if (!this.hasItems) {
+        return false;
+      }
+
       if (this.multiple) {
         return this.selected.length > 0;
       }
@@ -408,6 +424,14 @@ export default {
         return false;
       }
 
+      /**
+       * if dropdown has no items
+       * select all should be hidden
+       */
+      if (!this.hasItems) {
+        return false;
+      }
+
       return this.selected.length === 0;
     },
     showIntersectionObserver() {
@@ -636,7 +660,6 @@ export default {
        * @event reset
        */
       this.$emit('reset');
-      this.closeAndFocus();
     },
     onSelectAllButtonClicked() {
       /**