@gitlab/ui 49.0.0 → 49.0.2

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

@@ -138,11 +138,6 @@ export default {
       };
     },
   },
-  updated() {
-    if (this.visible) {
-      this.popper?.update();
-    }
-  },
   mounted() {
     this.$nextTick(() => {
       this.popper = createPopper(this.$refs.toggle.$el, this.$refs.content, this.popperConfig);
@@ -152,11 +147,22 @@ export default {
     this.popper.destroy();
   },
   methods: {
-    toggle() {
+    async toggle() {
       this.visible = !this.visible;
 
       if (this.visible) {
-        this.popper.update();
+        /* Initially dropdown is hidden with `display="none"`.
+          When `visible` prop is toggled ON, with the `nextTick` we wait for the DOM update -
+          dropdown's `display="block"` is set (adding CSS class `show`).
+          After that we can recalculate its position (calling `popper.update()`).
+          https://github.com/floating-ui/floating-ui/issues/630:
+          "Unfortunately there's not any way to compute the position of an element not rendered in the document".
+          Then we `await` while the new dropdown position is calculated and DOM updated accordingly.
+          After we can  emit the `GL_DROPDOWN_SHOWN` event to the parent which might interact with updated  dropdown,
+          e.g. set focus..
+         */
+        await this.$nextTick();
+        await this.popper?.update();
         this.$emit(GL_DROPDOWN_SHOWN);
       } else {
         this.$emit(GL_DROPDOWN_HIDDEN);

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

@@ -247,19 +247,25 @@ describe('GlListbox', () => {
     });
 
     describe('when `searchable` is enabled', () => {
-      it('should move focus to the first item on search input `ARROW_DOWN`', async () => {
+      let searchbox;
+
+      beforeEach(() => {
         buildWrapper({ items: mockOptions, searchable: true });
         findBaseDropdown().vm.$emit(GL_DROPDOWN_SHOWN);
-        findSearchBox().trigger('keydown', { code: ARROW_DOWN });
+        firstItem = findListItem(0);
+        searchbox = findSearchBox();
+      });
+
+      it('should move focus to the first item on search input `ARROW_DOWN`', async () => {
+        expect(searchbox.element).toHaveFocus();
+        searchbox.trigger('keydown', { code: ARROW_DOWN });
         expect(firstItem.element).toHaveFocus();
       });
 
       it('should move focus to the search input on first item `ARROW_UP', async () => {
-        buildWrapper({ items: mockOptions, searchable: true });
-        findBaseDropdown().vm.$emit(GL_DROPDOWN_SHOWN);
-        const focusSpy = jest.spyOn(wrapper.vm.$refs.searchBox, 'focusInput');
-        await firstItem.trigger('keydown', { code: ARROW_UP });
-        expect(focusSpy).toHaveBeenCalled();
+        searchbox.trigger('keydown', { code: ARROW_DOWN });
+        firstItem.trigger('keydown', { code: ARROW_UP });
+        expect(searchbox.element).toHaveFocus();
       });
     });
   });

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

@@ -293,19 +293,17 @@ export default {
       return index === 0 ? null : GROUP_TOP_BORDER_CLASSES;
     },
     onShow() {
-      this.$nextTick(() => {
-        if (this.searchable) {
-          this.focusSearchInput();
-        } else {
-          this.focusItem(this.selectedIndices[0] ?? 0, this.getFocusableListItemElements());
-        }
-        /**
-         * Emitted when dropdown is shown
-         *
-         * @event shown
-         */
-        this.$emit(GL_DROPDOWN_SHOWN);
-      });
+      if (this.searchable) {
+        this.focusSearchInput();
+      } else {
+        this.focusItem(this.selectedIndices[0] ?? 0, this.getFocusableListItemElements());
+      }
+      /**
+       * Emitted when dropdown is shown
+       *
+       * @event shown
+       */
+      this.$emit(GL_DROPDOWN_SHOWN);
     },
     onHide() {
       /**
@@ -366,9 +364,7 @@ export default {
     focusItem(index, elements) {
       this.nextFocusedItemIndex = index;
 
-      this.$nextTick(() => {
-        elements[index]?.focus();
-      });
+      elements[index]?.focus();
     },
     focusSearchInput() {
       this.$refs.searchBox.focusInput();

package/src/components/base/pagination/pagination.vue

@@ -375,8 +375,8 @@ export default {
 </script>
 
 <template>
-  <nav aria-label="Pagination">
-    <ul v-if="isVisible" class="pagination gl-pagination text-nowrap" :class="wrapperClasses">
+  <nav v-if="isVisible" class="gl-pagination text-nowrap" aria-label="Pagination">
+    <ul class="pagination" :class="wrapperClasses">
       <li
         class="page-item"
         :class="{