@gitlab/ui 49.0.0 → 49.0.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [49.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v49.0.0...v49.0.1) (2022-10-24)
+
+
+### Bug Fixes
+
+* **GlListbox:** fix dropdown positioning ([18d061f](https://gitlab.com/gitlab-org/gitlab-ui/commit/18d061fc905ac906a6c88f080b08b9e085eb372e))
+
 # [49.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v48.3.1...v49.0.0) (2022-10-24)
 
 

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

@@ -147,14 +147,6 @@ var script = {
 
   },
 
-  updated() {
-    if (this.visible) {
-      var _this$popper;
-
-      (_this$popper = this.popper) === null || _this$popper === void 0 ? void 0 : _this$popper.update();
-    }
-  },
-
   mounted() {
     this.$nextTick(() => {
       this.popper = createPopper(this.$refs.toggle.$el, this.$refs.content, this.popperConfig);
@@ -166,11 +158,24 @@ var script = {
   },
 
   methods: {
-    toggle() {
+    async toggle() {
       this.visible = !this.visible;
 
       if (this.visible) {
-        this.popper.update();
+        var _this$popper;
+
+        /* 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 = this.popper) === null || _this$popper === void 0 ? void 0 : _this$popper.update());
         this.$emit(GL_DROPDOWN_SHOWN);
       } else {
         this.$emit(GL_DROPDOWN_HIDDEN);

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

@@ -326,23 +326,21 @@ var script = {
     },
 
     onShow() {
-      this.$nextTick(() => {
-        if (this.searchable) {
-          this.focusSearchInput();
-        } else {
-          var _this$selectedIndices;
+      if (this.searchable) {
+        this.focusSearchInput();
+      } else {
+        var _this$selectedIndices;
 
-          this.focusItem((_this$selectedIndices = this.selectedIndices[0]) !== null && _this$selectedIndices !== void 0 ? _this$selectedIndices : 0, this.getFocusableListItemElements());
-        }
-        /**
-         * Emitted when dropdown is shown
-         *
-         * @event shown
-         */
+        this.focusItem((_this$selectedIndices = this.selectedIndices[0]) !== null && _this$selectedIndices !== void 0 ? _this$selectedIndices : 0, this.getFocusableListItemElements());
+      }
+      /**
+       * Emitted when dropdown is shown
+       *
+       * @event shown
+       */
 
 
-        this.$emit(GL_DROPDOWN_SHOWN);
-      });
+      this.$emit(GL_DROPDOWN_SHOWN);
     },
 
     onHide() {
@@ -413,12 +411,10 @@ var script = {
     },
 
     focusItem(index, elements) {
-      this.nextFocusedItemIndex = index;
-      this.$nextTick(() => {
-        var _elements$index;
+      var _elements$index;
 
-        (_elements$index = elements[index]) === null || _elements$index === void 0 ? void 0 : _elements$index.focus();
-      });
+      this.nextFocusedItemIndex = index;
+      (_elements$index = elements[index]) === null || _elements$index === void 0 ? void 0 : _elements$index.focus();
     },
 
     focusSearchInput() {

package/package.json

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

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

@@ -144,6 +144,7 @@ describe('base dropdown', () => {
       await toggle.trigger('click');
       expect(menu.classes('show')).toBe(true);
       expect(toggle.attributes('aria-expanded')).toBe('true');
+      await nextTick();
       expect(wrapper.emitted(GL_DROPDOWN_SHOWN).length).toBe(1);
 
       // close menu clicking toggle btn again

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();