@gitlab/ui 64.9.0 → 64.10.1

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [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)
+
+
+### Features
+
+* **DisclosureDropdown:** borderPosition property ([ea7822e](https://gitlab.com/gitlab-org/gitlab-ui/commit/ea7822e20992c6a0fc074f8ab3766b3145c09c00))
+* **GlKeysetPagination:** add navigation landmark ([3ffd2f7](https://gitlab.com/gitlab-org/gitlab-ui/commit/3ffd2f79b3029504a6e1b831df23904ca8473d06))
+
 # [64.9.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.8.0...v64.9.0) (2023-06-14)
 
 

package/dist/components/base/keyset_pagination/keyset_pagination.js

@@ -10,6 +10,7 @@ var script = {
     GlButton,
     GlIcon
   },
+  inheritAttrs: false,
   props: {
     // The following 4 properties match the default names of the
     // [PageInfo](https://docs.gitlab.com/ee/api/graphql/reference/index.html#pageinfo)
@@ -68,6 +69,15 @@ var script = {
       required: false,
       default: null
     },
+    /**
+     * The aria-label that needs to be set for the
+     * pagination landmark region.
+     */
+    navigationLabel: {
+      type: String,
+      required: false,
+      default: 'Pagination'
+    },
     /**
      * The text that will be rendered inside the "Next" button.
      * It\'s important to provide this parameter since the default text is not translatable.
@@ -101,7 +111,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-button-group',_vm._g(_vm._b({staticClass:"gl-keyset-pagination"},'gl-button-group',_vm.$attrs,false),_vm.$listeners),[_c('gl-button',{attrs:{"href":_vm.prevButtonLink,"disabled":_vm.disabled || !_vm.hasPreviousPage,"data-testid":"prevButton"},on:{"click":function($event){return _vm.$emit('prev', _vm.startCursor)}}},[_vm._t("previous-button-content",function(){return [_c('div',{staticClass:"gl-display-flex gl-align-center"},[_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v("\n        "+_vm._s(_vm.prevText)+"\n      ")],1)]})],2),_vm._v(" "),_c('gl-button',{attrs:{"href":_vm.nextButtonLink,"disabled":_vm.disabled || !_vm.hasNextPage,"data-testid":"nextButton"},on:{"click":function($event){return _vm.$emit('next', _vm.endCursor)}}},[_vm._t("next-button-content",function(){return [_c('div',{staticClass:"gl-display-flex gl-align-center"},[_vm._v("\n        "+_vm._s(_vm.nextText)+"\n        "),_c('gl-icon',{attrs:{"name":"chevron-right"}})],1)]})],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"gl-pagination",attrs:{"aria-label":_vm.navigationLabel}},[_c('gl-button-group',_vm._g(_vm._b({staticClass:"gl-keyset-pagination"},'gl-button-group',_vm.$attrs,false),_vm.$listeners),[_c('gl-button',{attrs:{"href":_vm.prevButtonLink,"disabled":_vm.disabled || !_vm.hasPreviousPage,"data-testid":"prevButton"},on:{"click":function($event){return _vm.$emit('prev', _vm.startCursor)}}},[_vm._t("previous-button-content",function(){return [_c('div',{staticClass:"gl-display-flex gl-align-center"},[_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v("\n          "+_vm._s(_vm.prevText)+"\n        ")],1)]})],2),_vm._v(" "),_c('gl-button',{attrs:{"href":_vm.nextButtonLink,"disabled":_vm.disabled || !_vm.hasNextPage,"data-testid":"nextButton"},on:{"click":function($event){return _vm.$emit('next', _vm.endCursor)}}},[_vm._t("next-button-content",function(){return [_c('div',{staticClass:"gl-display-flex gl-align-center"},[_vm._v("\n          "+_vm._s(_vm.nextText)+"\n          "),_c('gl-icon',{attrs:{"name":"chevron-right"}})],1)]})],2)],1)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/new_dropdowns/disclosure/constants.js

@@ -1,4 +1,8 @@
 const DISCLOSURE_DROPDOWN_ITEM_NAME = 'GlDisclosureDropdownItem';
 const DISCLOSURE_DROPDOWN_GROUP_NAME = 'GlDisclosureDropdownGroup';
+const DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS = {
+  top: 'top',
+  bottom: 'bottom'
+};
 
-export { DISCLOSURE_DROPDOWN_GROUP_NAME, DISCLOSURE_DROPDOWN_ITEM_NAME };
+export { DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS, DISCLOSURE_DROPDOWN_GROUP_NAME, DISCLOSURE_DROPDOWN_ITEM_NAME };

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.js

@@ -1,10 +1,13 @@
 import uniqueId from 'lodash/uniqueId';
 import GlDisclosureDropdownItem from './disclosure_dropdown_item';
 import { isGroup } from './utils';
-import { DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
+import { DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS, DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const GROUP_TOP_BORDER_CLASSES = 'gl-border-t gl-pt-2 gl-mt-2';
+const BORDER_CLASSES = {
+  [DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS.top]: 'gl-border-t gl-pt-2 gl-mt-2',
+  [DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS.bottom]: 'gl-border-b gl-pb-2 gl-mb-2'
+};
 var script = {
   name: DISCLOSURE_DROPDOWN_GROUP_NAME,
   components: {
@@ -22,17 +25,29 @@ var script = {
     },
     /**
      * If 'true', will set top border for the group
-     * to separate from other groups
+     * to separate from other groups. You can control
+     * the border position using the `borderPosition`
+     * property.
      */
     bordered: {
       type: Boolean,
       required: false,
       default: false
+    },
+    /**
+     * Controls the position of the group's border. Valid
+     * values are 'top' and 'bottom'.
+     */
+    borderPosition: {
+      type: String,
+      required: false,
+      default: DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS.top,
+      validator: value => Object.keys(DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS).includes(value)
     }
   },
   computed: {
     borderClass() {
-      return this.bordered ? GROUP_TOP_BORDER_CLASSES : null;
+      return this.bordered ? BORDER_CLASSES[this.borderPosition] : null;
     },
     showHeader() {
       var _this$group;
@@ -92,4 +107,4 @@ var __vue_staticRenderFns__ = [];
   );
 
 export default __vue_component__;
-export { GROUP_TOP_BORDER_CLASSES };
+export { BORDER_CLASSES };

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.9.0",
+  "version": "64.10.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/keyset_pagination/keyset_pagination.vue

@@ -10,6 +10,7 @@ export default {
     GlButton,
     GlIcon,
   },
+  inheritAttrs: false,
   props: {
     // The following 4 properties match the default names of the
     // [PageInfo](https://docs.gitlab.com/ee/api/graphql/reference/index.html#pageinfo)
@@ -68,6 +69,15 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * The aria-label that needs to be set for the
+     * pagination landmark region.
+     */
+    navigationLabel: {
+      type: String,
+      required: false,
+      default: 'Pagination',
+    },
     /**
      * The text that will be rendered inside the "Next" button.
      * It\'s important to provide this parameter since the default text is not translatable.
@@ -99,34 +109,36 @@ export default {
 </script>
 
 <template>
-  <gl-button-group class="gl-keyset-pagination" v-bind="$attrs" v-on="$listeners">
-    <gl-button
-      :href="prevButtonLink"
-      :disabled="disabled || !hasPreviousPage"
-      data-testid="prevButton"
-      @click="$emit('prev', startCursor)"
-    >
-      <!-- @slot Used to customize the appearance of the "Prev" button -->
-      <slot name="previous-button-content">
-        <div class="gl-display-flex gl-align-center">
-          <gl-icon name="chevron-left" />
-          {{ prevText }}
-        </div>
-      </slot>
-    </gl-button>
-    <gl-button
-      :href="nextButtonLink"
-      :disabled="disabled || !hasNextPage"
-      data-testid="nextButton"
-      @click="$emit('next', endCursor)"
-    >
-      <!-- @slot Used to customize the appearance of the "Next" button -->
-      <slot name="next-button-content">
-        <div class="gl-display-flex gl-align-center">
-          {{ nextText }}
-          <gl-icon name="chevron-right" />
-        </div>
-      </slot>
-    </gl-button>
-  </gl-button-group>
+  <nav class="gl-pagination" :aria-label="navigationLabel">
+    <gl-button-group class="gl-keyset-pagination" v-bind="$attrs" v-on="$listeners">
+      <gl-button
+        :href="prevButtonLink"
+        :disabled="disabled || !hasPreviousPage"
+        data-testid="prevButton"
+        @click="$emit('prev', startCursor)"
+      >
+        <!-- @slot Used to customize the appearance of the "Prev" button -->
+        <slot name="previous-button-content">
+          <div class="gl-display-flex gl-align-center">
+            <gl-icon name="chevron-left" />
+            {{ prevText }}
+          </div>
+        </slot>
+      </gl-button>
+      <gl-button
+        :href="nextButtonLink"
+        :disabled="disabled || !hasNextPage"
+        data-testid="nextButton"
+        @click="$emit('next', endCursor)"
+      >
+        <!-- @slot Used to customize the appearance of the "Next" button -->
+        <slot name="next-button-content">
+          <div class="gl-display-flex gl-align-center">
+            {{ nextText }}
+            <gl-icon name="chevron-right" />
+          </div>
+        </slot>
+      </gl-button>
+    </gl-button-group>
+  </nav>
 </template>

package/src/components/base/new_dropdowns/disclosure/constants.js

@@ -1,2 +1,6 @@
 export const DISCLOSURE_DROPDOWN_ITEM_NAME = 'GlDisclosureDropdownItem';
 export const DISCLOSURE_DROPDOWN_GROUP_NAME = 'GlDisclosureDropdownGroup';
+export const DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS = {
+  top: 'top',
+  bottom: 'bottom',
+};

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.md

@@ -91,7 +91,7 @@ template. If you want to render a custom template for items, use the
   <template #list-item="{ item }">
     <span class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
       {{item.text}}
-      <gl-icon v-if="item.icon" :name="item.icon"/>
+      <gl-icon v-if="item.icon" :name="item.icon" />
     </span>
   </template>
 </gl-disclosure-dropdown>
@@ -117,6 +117,16 @@ To render custom group labels, use the `group-label` scoped slot:
 </gl-disclosure-dropdown>
 ```
 
+To draw a horizontal line that separates two groups, set the `bordered` property.
+By default, the border appears above the group. You can change the border position
+using the `border-position` property:
+
+```html
+<gl-disclosure-dropdown>
+  <gl-disclosure-dropdown-group bordered border-position="bottom" :group="group" />
+</gl-disclosure-dropdown>
+```
+
 #### Miscellaneous content
 
 Besides default components, disclosure dropdown can render miscellaneous content inside it.
@@ -125,7 +135,7 @@ In this case the user is responsible for handling all events and navigation insi
 #### Dealing with long option texts
 
 - Some options might have long non-wrapping text that would overflow the dropdown maximum width. In
-such cases, it's recommended to override the `#list-item` slot and to truncate the option text using
-`GlTruncate`.
+  such cases, it's recommended to override the `#list-item` slot and to truncate the option text using
+  `GlTruncate`.
 - If the toggle text reflects the selected option text, it might be necessary to truncate
-it too by overriding the `#toggle` slot.
+  it too by overriding the `#toggle` slot.

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js

@@ -14,6 +14,7 @@ import { makeContainer } from '../../../../utils/story_decorators/container';
 import GlDisclosureDropdown from './disclosure_dropdown.vue';
 import GlDisclosureDropdownItem from './disclosure_dropdown_item.vue';
 import GlDisclosureDropdownGroup from './disclosure_dropdown_group.vue';
+import { DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS } from './constants';
 import readme from './disclosure_dropdown.md';
 import {
   mockItems,
@@ -229,7 +230,7 @@ export const CustomGroupsItemsAndToggle = makeGroupedExample({
           </template>
         </gl-disclosure-dropdown-item>
       </gl-disclosure-dropdown-group>
-      <gl-disclosure-dropdown-group bordered :group="$options.groups[0]" @action="closeDropdown">
+      <gl-disclosure-dropdown-group :bordered="bordered" :border-position="borderPosition" :group="$options.groups[0]" @action="closeDropdown">
         <template #list-item="{ item }">
           <span class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
             {{item.text}}
@@ -237,7 +238,7 @@ export const CustomGroupsItemsAndToggle = makeGroupedExample({
           </span>
         </template>
       </gl-disclosure-dropdown-group>
-      <gl-disclosure-dropdown-group bordered>
+      <gl-disclosure-dropdown-group :bordered="bordered" :border-position="borderPosition">
         <template #group-label>
           <span class="gl-font-sm">Navigation redesign</span>
           <gl-badge size="sm" variant="info">Beta</gl-badge>
@@ -253,7 +254,7 @@ export const CustomGroupsItemsAndToggle = makeGroupedExample({
           <template #list-item>Provide feedback</template>
         </gl-disclosure-dropdown-item>
       </gl-disclosure-dropdown-group>
-      <gl-disclosure-dropdown-group bordered :group="$options.groups[1]" @action="closeDropdown"/>
+      <gl-disclosure-dropdown-group :bordered="bordered" :border-position="borderPosition" :group="$options.groups[1]" @action="closeDropdown"/>
     `,
     {
       after: `
@@ -292,7 +293,18 @@ CustomGroupsItemsAndToggle.args = {
   toggleText: 'User profile menu',
   textSrOnly: true,
   autoClose: false,
+  bordered: true,
+  borderPosition: DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS.top,
 };
+CustomGroupsItemsAndToggle.argTypes = {
+  borderPosition: {
+    options: DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS,
+    control: {
+      type: 'select',
+    },
+  },
+};
+
 CustomGroupsItemsAndToggle.decorators = [makeContainer({ height: '400px' })];
 
 export const MiscellaneousContent = (args, { argTypes }) => ({
@@ -334,26 +346,26 @@ export default {
     category: {
       control: {
         type: 'select',
-        options: buttonCategoryOptions,
       },
+      options: buttonCategoryOptions,
     },
     variant: {
       control: {
         type: 'select',
-        options: buttonVariantOptions,
       },
+      options: buttonVariantOptions,
     },
     size: {
       control: {
         type: 'select',
-        options: Object.keys(buttonSizeOptions),
       },
+      options: Object.keys(buttonSizeOptions),
     },
     placement: {
       control: {
         type: 'select',
-        options: Object.keys(dropdownPlacements),
       },
+      options: Object.keys(dropdownPlacements),
     },
   },
   args: {

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.spec.js

@@ -1,9 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
-import GlDisclosureDropdownGroup, {
-  GROUP_TOP_BORDER_CLASSES,
-} from './disclosure_dropdown_group.vue';
+import GlDisclosureDropdownGroup, { BORDER_CLASSES } from './disclosure_dropdown_group.vue';
 import GlDisclosureDropdownItem from './disclosure_dropdown_item.vue';
 import { mockGroups, mockProfileGroups } from './mock_data';
+import { DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS as borderPositions } from './constants';
 
 describe('GlDisclosureDropdownGroup', () => {
   let wrapper;
@@ -69,17 +68,17 @@ describe('GlDisclosureDropdownGroup', () => {
     });
   });
 
-  describe('separator', () => {
-    const topBorderClasses = GROUP_TOP_BORDER_CLASSES.split(' ');
-
-    it('should not add top border by default', () => {
-      buildWrapper();
-      expect(wrapper.classes()).not.toEqual(expect.arrayContaining(topBorderClasses));
-    });
-
-    it('should add top border classes when `bordered` props is set to `true`', () => {
-      buildWrapper({ propsData: { bordered: true } });
-      expect(wrapper.classes()).toEqual(expect.arrayContaining(topBorderClasses));
-    });
-  });
+  it.each`
+    bordered | borderPosition            | classes
+    ${true}  | ${borderPositions.top}    | ${BORDER_CLASSES[borderPositions.top].split(' ')}
+    ${true}  | ${borderPositions.bottom} | ${BORDER_CLASSES[borderPositions.bottom].split(' ')}
+    ${false} | ${borderPositions.top}    | ${[]}
+    ${false} | ${borderPositions.bottom} | ${[]}
+  `(
+    'adds border classes `$classes` when bordered=$bordered and borderPosition=$borderPosition',
+    ({ bordered, borderPosition, classes }) => {
+      buildWrapper({ propsData: { bordered, borderPosition } });
+      expect(wrapper.classes()).toEqual(classes);
+    }
+  );
 });

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.vue

@@ -2,9 +2,15 @@
 import uniqueId from 'lodash/uniqueId';
 import GlDisclosureDropdownItem from './disclosure_dropdown_item.vue';
 import { isGroup } from './utils';
-import { DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
+import {
+  DISCLOSURE_DROPDOWN_GROUP_NAME,
+  DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS as borderPositions,
+} from './constants';
 
-export const GROUP_TOP_BORDER_CLASSES = 'gl-border-t gl-pt-2 gl-mt-2';
+export const BORDER_CLASSES = {
+  [borderPositions.top]: 'gl-border-t gl-pt-2 gl-mt-2',
+  [borderPositions.bottom]: 'gl-border-b gl-pb-2 gl-mb-2',
+};
 
 export default {
   name: DISCLOSURE_DROPDOWN_GROUP_NAME,
@@ -23,17 +29,30 @@ export default {
     },
     /**
      * If 'true', will set top border for the group
-     * to separate from other groups
+     * to separate from other groups. You can control
+     * the border position using the `borderPosition`
+     * property.
      */
     bordered: {
       type: Boolean,
       required: false,
       default: false,
     },
+
+    /**
+     * Controls the position of the group's border. Valid
+     * values are 'top' and 'bottom'.
+     */
+    borderPosition: {
+      type: String,
+      required: false,
+      default: borderPositions.top,
+      validator: (value) => Object.keys(borderPositions).includes(value),
+    },
   },
   computed: {
     borderClass() {
-      return this.bordered ? GROUP_TOP_BORDER_CLASSES : null;
+      return this.bordered ? BORDER_CLASSES[this.borderPosition] : null;
     },
     showHeader() {
       return this.$scopedSlots['group-label'] || this.group?.name;

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() {
       /**