@gitlab/ui 136.3.1 → 136.3.2

package/dist/components/base/collapse/collapse.js

@@ -71,10 +71,9 @@ var script = {
       }
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.emitState();
-    });
+  async mounted() {
+    await this.$nextTick();
+    this.emitState();
   },
   beforeDestroy() {
     // Trigger state emit if needed

package/dist/components/base/filtered_search/filtered_search.js

@@ -427,11 +427,10 @@ var script = {
         this.activeTokenIdx = null;
       }
     },
-    onClear() {
-      this.$nextTick(() => {
-        this.activeTokenIdx = this.lastTokenIdx;
-        this.$emit('clear');
-      });
+    async onClear() {
+      await this.$nextTick();
+      this.activeTokenIdx = this.lastTokenIdx;
+      this.$emit('clear');
     },
     submit() {
       /**

package/dist/components/base/filtered_search/filtered_search_token.js

@@ -245,20 +245,19 @@ var script = {
         this.$emit('replace', createTerm(this.config.title));
       }
     },
-    replaceToken(newType) {
+    async replaceToken(newType) {
       const newTokenConfig = this.availableTokens.find(_ref => {
         let type = _ref.type;
         return type === newType;
       });
       if (newTokenConfig === this.config) {
-        this.$nextTick(() => {
-          /**
-           * Emitted when this term token will lose its focus.
-           *
-           * @event deactivate
-           */
-          this.$emit('deactivate');
-        });
+        await this.$nextTick();
+        /**
+         * Emitted when this term token will lose its focus.
+         *
+         * @event deactivate
+         */
+        this.$emit('deactivate');
         return;
       }
       if (newTokenConfig) {

package/dist/components/base/filtered_search/filtered_search_token_segment.js

@@ -312,22 +312,21 @@ var script = {
         loose = _ref2.loose;
       return (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.find(option => loose ? match(option[this.optionTextField], inputValue) : option[this.optionTextField] === inputValue);
     },
-    activate() {
+    async activate() {
       this.fallbackValue = this.value;
-      this.$nextTick(() => {
-        const input = this.$refs.input;
-        if (input) {
-          input.focus();
-          input.scrollIntoView({
-            block: 'nearest',
-            inline: 'end'
-          });
-          this.alignSuggestions(input);
-          if (this.cursorPosition === 'start') {
-            input === null || input === void 0 ? void 0 : input.setSelectionRange(0, 0);
-          }
+      await this.$nextTick();
+      const input = this.$refs.input;
+      if (input) {
+        input.focus();
+        input.scrollIntoView({
+          block: 'nearest',
+          inline: 'end'
+        });
+        this.alignSuggestions(input);
+        if (this.cursorPosition === 'start') {
+          input === null || input === void 0 ? void 0 : input.setSelectionRange(0, 0);
         }
-      });
+      }
     },
     deactivate() {
       var _this$matchingOption;

package/dist/components/base/form/form_checkbox/form_checkbox.js

@@ -221,7 +221,7 @@ var script = {
         }
       }
     },
-    handleChange(_ref) {
+    async handleChange(_ref) {
       let _ref$target = _ref.target,
         checked = _ref$target.checked,
         indeterminate = _ref$target.indeterminate;
@@ -245,25 +245,24 @@ var script = {
       this.computedLocalChecked = localChecked;
 
       // Fire events in a `$nextTick()` to ensure the `v-model` is updated
-      this.$nextTick(() => {
+      await this.$nextTick();
+      /**
+       * Emitted when selected value(s) is changed due to user interaction.
+       *
+       * @event change
+       */
+      this.$emit('change', localChecked);
+
+      // If this is a child of a group, we emit a change event on it as well
+      if (this.isGroup) {
         /**
          * Emitted when selected value(s) is changed due to user interaction.
          *
          * @event change
          */
-        this.$emit('change', localChecked);
-
-        // If this is a child of a group, we emit a change event on it as well
-        if (this.isGroup) {
-          /**
-           * Emitted when selected value(s) is changed due to user interaction.
-           *
-           * @event change
-           */
-          this.group.$emit('change', localChecked);
-        }
-        this.$emit('indeterminate', indeterminate);
-      });
+        this.group.$emit('change', localChecked);
+      }
+      this.$emit('indeterminate', indeterminate);
     },
     setIndeterminate(state) {
       // Indeterminate only supported in single checkbox mode

package/dist/components/base/form/form_input/form_input.js

@@ -429,14 +429,13 @@ var script = {
     // Create private non-reactive props
     this.$_inputDebounceTimer = null;
   },
-  mounted() {
+  async mounted() {
     this.setWheelStopper(this.noWheel);
     this.handleAutofocus();
-    this.$nextTick(() => {
-      // Update DOM with auto-generated ID after mount
-      // to prevent SSR hydration errors
-      this.localId = uniqueId('gl-form-input-');
-    });
+    await this.$nextTick();
+    // Update DOM with auto-generated ID after mount
+    // to prevent SSR hydration errors
+    this.localId = uniqueId('gl-form-input-');
   },
   deactivated() {
     // Turn off listeners when keep-alive component deactivated
@@ -600,11 +599,10 @@ var script = {
       });
       this.blur();
     },
-    handleAutofocus() {
-      this.$nextTick(() => {
-        window.requestAnimationFrame(() => {
-          if (this.autofocus && isVisible(this.$refs.input)) this.focus();
-        });
+    async handleAutofocus() {
+      await this.$nextTick();
+      window.requestAnimationFrame(() => {
+        if (this.autofocus && isVisible(this.$refs.input)) this.focus();
       });
     },
     select() {

package/dist/components/base/form/form_radio/form_radio.js

@@ -173,33 +173,32 @@ var script = {
         this.$emit('input', newValue);
       }
     },
-    handleChange() {
+    async handleChange() {
       const value = this.value;
 
       // Update `computedLocalChecked`
       this.computedLocalChecked = value;
 
       // Fire events in a `$nextTick()` to ensure the `v-model` is updated
-      this.$nextTick(() => {
+      await this.$nextTick();
+      /**
+       * Emitted when the selected value is changed due to user interaction
+       *
+       * @event change
+       * @type {boolean} current selected value of radio group
+       */
+      this.$emit('change', value);
+
+      // If this is a child of a group, we emit a change event on it as well
+      if (this.isGroup) {
         /**
          * Emitted when the selected value is changed due to user interaction
          *
          * @event change
          * @type {boolean} current selected value of radio group
          */
-        this.$emit('change', value);
-
-        // If this is a child of a group, we emit a change event on it as well
-        if (this.isGroup) {
-          /**
-           * Emitted when the selected value is changed due to user interaction
-           *
-           * @event change
-           * @type {boolean} current selected value of radio group
-           */
-          this.group.$emit('change', value);
-        }
-      });
+        this.group.$emit('change', value);
+      }
     },
     focus() {
       if (!this.disabled) {

package/dist/components/base/form/form_textarea/form_textarea.js

@@ -309,11 +309,10 @@ var script = {
   created() {
     this.$_inputDebounceTimer = null;
   },
-  mounted() {
+  async mounted() {
     this.handleAutofocus();
-    this.$nextTick(() => {
-      this.localId = uniqueId('gl-form-textarea-');
-    });
+    await this.$nextTick();
+    this.localId = uniqueId('gl-form-textarea-');
   },
   beforeDestroy() {
     this.clearDebounce();
@@ -423,13 +422,12 @@ var script = {
        */
       this.$emit('blur', event);
     },
-    handleAutofocus() {
-      this.$nextTick(() => {
-        window.requestAnimationFrame(() => {
-          if (this.autofocus && isVisible(this.$refs.input)) {
-            this.focus();
-          }
-        });
+    async handleAutofocus() {
+      await this.$nextTick();
+      window.requestAnimationFrame(() => {
+        if (this.autofocus && isVisible(this.$refs.input)) {
+          this.focus();
+        }
       });
     },
     handleKeyPress(e) {
@@ -442,11 +440,10 @@ var script = {
         this.$emit('submit');
       }
     },
-    setHeight() {
-      this.$nextTick(() => {
-        window.requestAnimationFrame(() => {
-          this.heightInPx = this.computeHeight();
-        });
+    async setHeight() {
+      await this.$nextTick();
+      window.requestAnimationFrame(() => {
+        this.heightInPx = this.computeHeight();
       });
     },
     computeHeight() {

package/dist/components/base/infinite_scroll/infinite_scroll.js

@@ -49,7 +49,7 @@ var script = {
     }
   },
   watch: {
-    fetchedItems(newVal, oldVal) {
+    async fetchedItems(newVal, oldVal) {
       // Re-adjust scroll to the current item if more items are added
       if (newVal > oldVal) {
         const _this$$refs$infiniteC = this.$refs.infiniteContainer,
@@ -58,32 +58,30 @@ var script = {
         // Only when scrolled to the top
         if (scrollHeight !== 0 && scrollTop === 0) {
           // Wait until the DOM is fully updated to adjust scroll
-          this.$nextTick(() => {
-            const newScrollHeight = this.$refs.infiniteContainer.scrollHeight;
+          await this.$nextTick();
+          const newScrollHeight = this.$refs.infiniteContainer.scrollHeight;
 
-            // New scrollTop is the new height, minus the old height
-            // minus a small space to allow the user to trigger a scroll once more
-            let top = newScrollHeight - scrollHeight - adjustScrollGap;
+          // New scrollTop is the new height, minus the old height
+          // minus a small space to allow the user to trigger a scroll once more
+          let top = newScrollHeight - scrollHeight - adjustScrollGap;
 
-            // Never adjust to 0, or a new event may be be triggered
-            if (top < 1) {
-              top = 1;
-            }
-            this.scrollTo({
-              top
-            });
+          // Never adjust to 0, or a new event may be be triggered
+          if (top < 1) {
+            top = 1;
+          }
+          this.scrollTo({
+            top
           });
         }
       }
     }
   },
-  mounted() {
+  async mounted() {
     // Scroll to bottom for reverse effect
-    this.$nextTick(() => {
-      if (this.$listeners.topReached && !this.$listeners.bottomReached) {
-        this.scrollDown();
-      }
-    });
+    await this.$nextTick();
+    if (this.$listeners.topReached && !this.$listeners.bottomReached) {
+      this.scrollDown();
+    }
   },
   methods: {
     /**

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

@@ -569,22 +569,21 @@ var script = {
       }
     },
     items: {
-      handler() {
-        this.$nextTick(() => {
-          /* Every time the list of items changes (on search),
-           * the observed elements are recreated, thus we need to start obesrving them again */
-          this.observeScroll();
+      async handler() {
+        await this.$nextTick();
+        /* Every time the list of items changes (on search),
+         * the observed elements are recreated, thus we need to start obesrving them again */
+        this.observeScroll();
 
-          /**
-           * Every time the list of items changes, and there is a search string,
-           * we want to visually highlight the first enabled item
-           */
-          if (this.searchHasOptions) {
-            this.nextFocusedItemIndex = this.getFirstEnabledIndex();
-          } else {
-            this.nextFocusedItemIndex = null;
-          }
-        });
+        /**
+         * Every time the list of items changes, and there is a search string,
+         * we want to visually highlight the first enabled item
+         */
+        if (this.searchHasOptions) {
+          this.nextFocusedItemIndex = this.getFirstEnabledIndex();
+        } else {
+          this.nextFocusedItemIndex = null;
+        }
       }
     },
     ...(process.env.NODE_ENV !== 'production' ? {
@@ -774,7 +773,7 @@ var script = {
       const nextIndex = clamp(currentIndex + offset, 0, elements.length - 1);
       this.focusItem(nextIndex, elements);
     },
-    focusItem(index, elements) {
+    async focusItem(index, elements) {
       let keepSearchFocused = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       this.nextFocusedItemIndex = index;
 
@@ -791,9 +790,8 @@ var script = {
         var _elements$index;
         (_elements$index = elements[index]) === null || _elements$index === void 0 ? void 0 : _elements$index.focus();
       }
-      this.$nextTick(() => {
-        this.scrollActiveItemIntoView();
-      });
+      await this.$nextTick();
+      this.scrollActiveItemIntoView();
     },
     focusSearchInput() {
       this.$refs.searchBox.focusInput();

package/dist/components/base/tabs/tabs/scrollable_tabs.js

@@ -68,23 +68,21 @@ var script = {
       }), {});
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.navScrollWidth = this.getScrollWidth();
-    });
+  async mounted() {
     this.handleNavScroll = debounce(e => {
       this.scrollLeft = e.target.scrollLeft;
     }, 100);
     this.getNavContainer().addEventListener('scroll', this.handleNavScroll);
+    await this.$nextTick();
+    this.navScrollWidth = this.getScrollWidth();
   },
   beforeDestroy() {
     this.getNavContainer().removeEventListener('scroll', this.handleNavScroll);
   },
-  updated() {
+  async updated() {
     // Whenever tabs are added or removed we need to recalculate the reactive scrollWidth
-    this.$nextTick(() => {
-      this.navScrollWidth = this.getScrollWidth();
-    });
+    await this.$nextTick();
+    this.navScrollWidth = this.getScrollWidth();
   },
   methods: {
     handleResize(_ref) {

package/dist/components/base/token_selector/token_selector.js

@@ -216,7 +216,7 @@ var script = {
     }
   },
   watch: {
-    inputText(newValue, oldValue) {
+    async inputText(newValue, oldValue) {
       if (newValue !== oldValue) {
         /**
          * Fired when user types in the token selector
@@ -234,13 +234,12 @@ var script = {
         // Wait a tick so `text-input` event can be used to validate
         // the value and change the `allowUserDefinedTokens` and/or
         // `hideDropdownWithNoItems` props
-        this.$nextTick(() => {
-          if (this.hideDropdown) {
-            this.closeDropdown();
-          } else if (newValue !== '') {
-            this.openDropdown();
-          }
-        });
+        await this.$nextTick();
+        if (this.hideDropdown) {
+          this.closeDropdown();
+        } else if (newValue !== '') {
+          this.openDropdown();
+        }
       }
     }
   },
@@ -272,7 +271,8 @@ var script = {
         this.triggerTokenFocusNextBackspace = true;
       }
     },
-    handleBlur(event) {
+    async handleBlur(event) {
+      var _event$relatedTarget, _event$relatedTarget$;
       /**
        * Fired when the token selector is blurred
        *
@@ -285,12 +285,10 @@ var script = {
       // Workaround is to:
       // 1. Explicitly focus the dropdown menu item button on `mousedown` event. (see './token_selector_dropdown.vue')
       // 2. Use `nextTick` so `blur` event is fired after the `mousedown` event
-      this.$nextTick(() => {
-        var _event$relatedTarget, _event$relatedTarget$;
-        if (!((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && (_event$relatedTarget$ = _event$relatedTarget.closest) !== null && _event$relatedTarget$ !== void 0 && _event$relatedTarget$.call(_event$relatedTarget, '.dropdown-item'))) {
-          this.closeDropdown();
-        }
-      });
+      await this.$nextTick();
+      if (!((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && (_event$relatedTarget$ = _event$relatedTarget.closest) !== null && _event$relatedTarget$ !== void 0 && _event$relatedTarget$.call(_event$relatedTarget, '.dropdown-item'))) {
+        this.closeDropdown();
+      }
     },
     handleEnter() {
       if (this.focusedDropdownItem && this.dropdownIsOpen) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "136.3.1",
+  "version": "136.3.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -140,7 +140,7 @@
     "autoprefixer": "10.5.4",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
-    "cypress": "15.20.1",
+    "cypress": "15.21.0",
     "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.6.0",
@@ -169,13 +169,13 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "sass": "^1.102.0",
+    "sass": "^1.103.1",
     "sass-loader": "^10.5.2",
     "sass-true": "^9",
     "start-server-and-test": "^2.1.5",
     "storybook": "^7.6.24",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^5.5.1",
+    "style-dictionary": "^5.5.2",
     "style-loader": "^4",
     "tailwindcss": "3.4.19",
     "vue": "2.7.16",

package/src/components/base/collapse/collapse.vue

@@ -71,10 +71,9 @@ export default {
       }
     },
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.emitState();
-    });
+  async mounted() {
+    await this.$nextTick();
+    this.emitState();
   },
   beforeDestroy() {
     // Trigger state emit if needed

package/src/components/base/filtered_search/filtered_search.vue

@@ -402,11 +402,10 @@ export default {
       }
     },
 
-    onClear() {
-      this.$nextTick(() => {
-        this.activeTokenIdx = this.lastTokenIdx;
-        this.$emit('clear');
-      });
+    async onClear() {
+      await this.$nextTick();
+      this.activeTokenIdx = this.lastTokenIdx;
+      this.$emit('clear');
     },
 
     submit() {

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -247,18 +247,17 @@ export default {
       }
     },
 
-    replaceToken(newType) {
+    async replaceToken(newType) {
       const newTokenConfig = this.availableTokens.find(({ type }) => type === newType);
 
       if (newTokenConfig === this.config) {
-        this.$nextTick(() => {
-          /**
-           * Emitted when this term token will lose its focus.
-           *
-           * @event deactivate
-           */
-          this.$emit('deactivate');
-        });
+        await this.$nextTick();
+        /**
+         * Emitted when this term token will lose its focus.
+         *
+         * @event deactivate
+         */
+        this.$emit('deactivate');
         return;
       }
 

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -316,20 +316,19 @@ export default {
       );
     },
 
-    activate() {
+    async activate() {
       this.fallbackValue = this.value;
 
-      this.$nextTick(() => {
-        const { input } = this.$refs;
-        if (input) {
-          input.focus();
-          input.scrollIntoView({ block: 'nearest', inline: 'end' });
-          this.alignSuggestions(input);
-          if (this.cursorPosition === 'start') {
-            input?.setSelectionRange(0, 0);
-          }
+      await this.$nextTick();
+      const { input } = this.$refs;
+      if (input) {
+        input.focus();
+        input.scrollIntoView({ block: 'nearest', inline: 'end' });
+        this.alignSuggestions(input);
+        if (this.cursorPosition === 'start') {
+          input?.setSelectionRange(0, 0);
         }
-      });
+      }
     },
 
     deactivate() {

package/src/components/base/form/form_checkbox/form_checkbox.vue

@@ -221,7 +221,7 @@ export default {
         }
       }
     },
-    handleChange({ target: { checked, indeterminate } }) {
+    async handleChange({ target: { checked, indeterminate } }) {
       const { value, uncheckedValue } = this;
 
       // Update `computedLocalChecked`
@@ -241,26 +241,25 @@ export default {
       this.computedLocalChecked = localChecked;
 
       // Fire events in a `$nextTick()` to ensure the `v-model` is updated
-      this.$nextTick(() => {
+      await this.$nextTick();
+      /**
+       * Emitted when selected value(s) is changed due to user interaction.
+       *
+       * @event change
+       */
+      this.$emit('change', localChecked);
+
+      // If this is a child of a group, we emit a change event on it as well
+      if (this.isGroup) {
         /**
          * Emitted when selected value(s) is changed due to user interaction.
          *
          * @event change
          */
-        this.$emit('change', localChecked);
-
-        // If this is a child of a group, we emit a change event on it as well
-        if (this.isGroup) {
-          /**
-           * Emitted when selected value(s) is changed due to user interaction.
-           *
-           * @event change
-           */
-          this.group.$emit('change', localChecked);
-        }
+        this.group.$emit('change', localChecked);
+      }
 
-        this.$emit('indeterminate', indeterminate);
-      });
+      this.$emit('indeterminate', indeterminate);
     },
     setIndeterminate(state) {
       // Indeterminate only supported in single checkbox mode

package/src/components/base/form/form_input/form_input.vue

@@ -373,14 +373,13 @@ export default {
     // Create private non-reactive props
     this.$_inputDebounceTimer = null;
   },
-  mounted() {
+  async mounted() {
     this.setWheelStopper(this.noWheel);
     this.handleAutofocus();
-    this.$nextTick(() => {
-      // Update DOM with auto-generated ID after mount
-      // to prevent SSR hydration errors
-      this.localId = uniqueId('gl-form-input-');
-    });
+    await this.$nextTick();
+    // Update DOM with auto-generated ID after mount
+    // to prevent SSR hydration errors
+    this.localId = uniqueId('gl-form-input-');
   },
   deactivated() {
     // Turn off listeners when keep-alive component deactivated
@@ -534,11 +533,10 @@ export default {
       stopEvent(event, { propagation: false });
       this.blur();
     },
-    handleAutofocus() {
-      this.$nextTick(() => {
-        window.requestAnimationFrame(() => {
-          if (this.autofocus && isVisible(this.$refs.input)) this.focus();
-        });
+    async handleAutofocus() {
+      await this.$nextTick();
+      window.requestAnimationFrame(() => {
+        if (this.autofocus && isVisible(this.$refs.input)) this.focus();
       });
     },
     select(...args) {

package/src/components/base/form/form_radio/form_radio.vue

@@ -171,33 +171,32 @@ export default {
         this.$emit('input', newValue);
       }
     },
-    handleChange() {
+    async handleChange() {
       const { value } = this;
 
       // Update `computedLocalChecked`
       this.computedLocalChecked = value;
 
       // Fire events in a `$nextTick()` to ensure the `v-model` is updated
-      this.$nextTick(() => {
+      await this.$nextTick();
+      /**
+       * Emitted when the selected value is changed due to user interaction
+       *
+       * @event change
+       * @type {boolean} current selected value of radio group
+       */
+      this.$emit('change', value);
+
+      // If this is a child of a group, we emit a change event on it as well
+      if (this.isGroup) {
         /**
          * Emitted when the selected value is changed due to user interaction
          *
          * @event change
          * @type {boolean} current selected value of radio group
          */
-        this.$emit('change', value);
-
-        // If this is a child of a group, we emit a change event on it as well
-        if (this.isGroup) {
-          /**
-           * Emitted when the selected value is changed due to user interaction
-           *
-           * @event change
-           * @type {boolean} current selected value of radio group
-           */
-          this.group.$emit('change', value);
-        }
-      });
+        this.group.$emit('change', value);
+      }
     },
     focus() {
       if (!this.disabled) {

package/src/components/base/form/form_textarea/form_textarea.vue

@@ -315,11 +315,10 @@ export default {
   created() {
     this.$_inputDebounceTimer = null;
   },
-  mounted() {
+  async mounted() {
     this.handleAutofocus();
-    this.$nextTick(() => {
-      this.localId = uniqueId('gl-form-textarea-');
-    });
+    await this.$nextTick();
+    this.localId = uniqueId('gl-form-textarea-');
   },
   beforeDestroy() {
     this.clearDebounce();
@@ -424,13 +423,12 @@ export default {
        */
       this.$emit('blur', event);
     },
-    handleAutofocus() {
-      this.$nextTick(() => {
-        window.requestAnimationFrame(() => {
-          if (this.autofocus && isVisible(this.$refs.input)) {
-            this.focus();
-          }
-        });
+    async handleAutofocus() {
+      await this.$nextTick();
+      window.requestAnimationFrame(() => {
+        if (this.autofocus && isVisible(this.$refs.input)) {
+          this.focus();
+        }
       });
     },
     handleKeyPress(e) {
@@ -443,11 +441,10 @@ export default {
         this.$emit('submit');
       }
     },
-    setHeight() {
-      this.$nextTick(() => {
-        window.requestAnimationFrame(() => {
-          this.heightInPx = this.computeHeight();
-        });
+    async setHeight() {
+      await this.$nextTick();
+      window.requestAnimationFrame(() => {
+        this.heightInPx = this.computeHeight();
       });
     },
     computeHeight() {

package/src/components/base/infinite_scroll/infinite_scroll.vue

@@ -51,39 +51,37 @@ export default {
     },
   },
   watch: {
-    fetchedItems(newVal, oldVal) {
+    async fetchedItems(newVal, oldVal) {
       // Re-adjust scroll to the current item if more items are added
       if (newVal > oldVal) {
         const { scrollHeight, scrollTop } = this.$refs.infiniteContainer;
         // Only when scrolled to the top
         if (scrollHeight !== 0 && scrollTop === 0) {
           // Wait until the DOM is fully updated to adjust scroll
-          this.$nextTick(() => {
-            const { scrollHeight: newScrollHeight } = this.$refs.infiniteContainer;
+          await this.$nextTick();
+          const { scrollHeight: newScrollHeight } = this.$refs.infiniteContainer;
 
-            // New scrollTop is the new height, minus the old height
-            // minus a small space to allow the user to trigger a scroll once more
-            let top = newScrollHeight - scrollHeight - adjustScrollGap;
+          // New scrollTop is the new height, minus the old height
+          // minus a small space to allow the user to trigger a scroll once more
+          let top = newScrollHeight - scrollHeight - adjustScrollGap;
 
-            // Never adjust to 0, or a new event may be be triggered
-            if (top < 1) {
-              top = 1;
-            }
+          // Never adjust to 0, or a new event may be be triggered
+          if (top < 1) {
+            top = 1;
+          }
 
-            this.scrollTo({ top });
-          });
+          this.scrollTo({ top });
         }
       }
     },
   },
 
-  mounted() {
+  async mounted() {
     // Scroll to bottom for reverse effect
-    this.$nextTick(() => {
-      if (this.$listeners.topReached && !this.$listeners.bottomReached) {
-        this.scrollDown();
-      }
-    });
+    await this.$nextTick();
+    if (this.$listeners.topReached && !this.$listeners.bottomReached) {
+      this.scrollDown();
+    }
   },
 
   methods: {

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

@@ -610,22 +610,21 @@ export default {
       },
     },
     items: {
-      handler() {
-        this.$nextTick(() => {
-          /* Every time the list of items changes (on search),
-           * the observed elements are recreated, thus we need to start obesrving them again */
-          this.observeScroll();
+      async handler() {
+        await this.$nextTick();
+        /* Every time the list of items changes (on search),
+         * the observed elements are recreated, thus we need to start obesrving them again */
+        this.observeScroll();
 
-          /**
-           * Every time the list of items changes, and there is a search string,
-           * we want to visually highlight the first enabled item
-           */
-          if (this.searchHasOptions) {
-            this.nextFocusedItemIndex = this.getFirstEnabledIndex();
-          } else {
-            this.nextFocusedItemIndex = null;
-          }
-        });
+        /**
+         * Every time the list of items changes, and there is a search string,
+         * we want to visually highlight the first enabled item
+         */
+        if (this.searchHasOptions) {
+          this.nextFocusedItemIndex = this.getFirstEnabledIndex();
+        } else {
+          this.nextFocusedItemIndex = null;
+        }
       },
     },
     ...(process.env.NODE_ENV !== 'production'
@@ -831,7 +830,7 @@ export default {
 
       this.focusItem(nextIndex, elements);
     },
-    focusItem(index, elements, keepSearchFocused = false) {
+    async focusItem(index, elements, keepSearchFocused = false) {
       this.nextFocusedItemIndex = index;
 
       // Always update the activeItemId when focus changes
@@ -847,9 +846,8 @@ export default {
         elements[index]?.focus();
       }
 
-      this.$nextTick(() => {
-        this.scrollActiveItemIntoView();
-      });
+      await this.$nextTick();
+      this.scrollActiveItemIntoView();
     },
     focusSearchInput() {
       this.$refs.searchBox.focusInput();

package/src/components/base/tabs/tabs/scrollable_tabs.vue

@@ -72,25 +72,23 @@ export default {
         .reduce((acc, key) => Object.assign(acc, { [key]: this.$attrs[key] }), {});
     },
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.navScrollWidth = this.getScrollWidth();
-    });
-
+  async mounted() {
     this.handleNavScroll = debounce((e) => {
       this.scrollLeft = e.target.scrollLeft;
     }, 100);
 
     this.getNavContainer().addEventListener('scroll', this.handleNavScroll);
+
+    await this.$nextTick();
+    this.navScrollWidth = this.getScrollWidth();
   },
   beforeDestroy() {
     this.getNavContainer().removeEventListener('scroll', this.handleNavScroll);
   },
-  updated() {
+  async updated() {
     // Whenever tabs are added or removed we need to recalculate the reactive scrollWidth
-    this.$nextTick(() => {
-      this.navScrollWidth = this.getScrollWidth();
-    });
+    await this.$nextTick();
+    this.navScrollWidth = this.getScrollWidth();
   },
   methods: {
     handleResize({ contentRect: { width } }) {

package/src/components/base/token_selector/token_selector.vue

@@ -222,7 +222,7 @@ export default {
     },
   },
   watch: {
-    inputText(newValue, oldValue) {
+    async inputText(newValue, oldValue) {
       if (newValue !== oldValue) {
         /**
          * Fired when user types in the token selector
@@ -242,13 +242,12 @@ export default {
         // Wait a tick so `text-input` event can be used to validate
         // the value and change the `allowUserDefinedTokens` and/or
         // `hideDropdownWithNoItems` props
-        this.$nextTick(() => {
-          if (this.hideDropdown) {
-            this.closeDropdown();
-          } else if (newValue !== '') {
-            this.openDropdown();
-          }
-        });
+        await this.$nextTick();
+        if (this.hideDropdown) {
+          this.closeDropdown();
+        } else if (newValue !== '') {
+          this.openDropdown();
+        }
       }
     },
   },
@@ -286,7 +285,7 @@ export default {
         this.triggerTokenFocusNextBackspace = true;
       }
     },
-    handleBlur(event) {
+    async handleBlur(event) {
       /**
        * Fired when the token selector is blurred
        *
@@ -300,11 +299,10 @@ export default {
       // Workaround is to:
       // 1. Explicitly focus the dropdown menu item button on `mousedown` event. (see './token_selector_dropdown.vue')
       // 2. Use `nextTick` so `blur` event is fired after the `mousedown` event
-      this.$nextTick(() => {
-        if (!event.relatedTarget?.closest?.('.dropdown-item')) {
-          this.closeDropdown();
-        }
-      });
+      await this.$nextTick();
+      if (!event.relatedTarget?.closest?.('.dropdown-item')) {
+        this.closeDropdown();
+      }
     },
     handleEnter() {
       if (this.focusedDropdownItem && this.dropdownIsOpen) {