quasar 2.4.10 → 2.5.0

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.4.10
+ * Quasar Framework v2.5.0
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -40,19 +40,15 @@
   let iosCorrection;
 
   function getMatch (userAgent, platformMatch) {
-    const match = /(edge|edga|edgios)\/([\w.]+)/.exec(userAgent)
+    const match = /(edg|edge|edga|edgios)\/([\w.]+)/.exec(userAgent)
       || /(opr)[\/]([\w.]+)/.exec(userAgent)
       || /(vivaldi)[\/]([\w.]+)/.exec(userAgent)
       || /(chrome|crios)[\/]([\w.]+)/.exec(userAgent)
-      || /(iemobile)[\/]([\w.]+)/.exec(userAgent)
       || /(version)(applewebkit)[\/]([\w.]+).*(safari)[\/]([\w.]+)/.exec(userAgent)
       || /(webkit)[\/]([\w.]+).*(version)[\/]([\w.]+).*(safari)[\/]([\w.]+)/.exec(userAgent)
       || /(firefox|fxios)[\/]([\w.]+)/.exec(userAgent)
       || /(webkit)[\/]([\w.]+)/.exec(userAgent)
       || /(opera)(?:.*version|)[\/]([\w.]+)/.exec(userAgent)
-      || /(msie) ([\w.]+)/.exec(userAgent)
-      || (userAgent.indexOf('trident') >= 0 && /(rv)(?::| )([\w.]+)/.exec(userAgent))
-      || (userAgent.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(userAgent))
       || [];
 
     return {
@@ -75,6 +71,8 @@
       || /(mac)/.exec(userAgent)
       || /(linux)/.exec(userAgent)
       || /(cros)/.exec(userAgent)
+      // TODO: Remove BlackBerry detection. BlackBerry OS, BlackBerry 10, and BlackBerry PlayBook OS
+      // is officially dead as of January 4, 2022 (https://www.blackberry.com/us/en/support/devices/end-of-life)
       || /(playbook)/.exec(userAgent)
       || /(bb)/.exec(userAgent)
       || /(blackberry)/.exec(userAgent)
@@ -164,6 +162,10 @@
       delete browser[ 'windows phone' ];
     }
 
+    // TODO: The assumption about WebKit based browsers below is not completely accurate.
+    // Google released Blink(a fork of WebKit) engine on April 3, 2013, which is really different than WebKit today.
+    // Today, one might want to check for WebKit to deal with its bugs, which is used on all browsers on iOS, and Safari browser on all platforms.
+
     // Chrome, Opera 15+, Vivaldi and Safari are webkit based browsers
     if (
       browser.chrome
@@ -180,8 +182,15 @@
       browser.webkit = true;
     }
 
+    // TODO: (Qv3) rename the terms 'edge' to 'edge legacy'(or remove it) then 'edge chromium' to 'edge' to match with the known up-to-date terms
+    // Microsoft Edge is the new Chromium-based browser. Microsoft Edge Legacy is the old EdgeHTML-based browser (EOL: March 9, 2021).
+    if (browser.edg) {
+      matched.browser = 'edgechromium';
+      browser.edgeChromium = true;
+    }
+
     // Blackberry browsers are marked as Safari on BlackBerry
-    if (browser.safari && browser.blackberry || browser.bb) {
+    if ((browser.safari && browser.blackberry) || browser.bb) {
       matched.browser = 'blackberry';
       browser.blackberry = true;
     }
@@ -624,12 +633,19 @@
         return
       }
 
+      const { visualViewport } = window;
+      const target = visualViewport || window;
+      const getSize = visualViewport === void 0
+        ? () => [ window.innerWidth, window.innerHeight ]
+        : () => [
+            visualViewport.width * visualViewport.scale + window.innerWidth - document.scrollingElement.clientWidth,
+            visualViewport.height * visualViewport.scale + window.innerHeight - document.scrollingElement.clientHeight
+          ];
+
       const classes = $q.config.screen !== void 0 && $q.config.screen.bodyClasses === true;
 
       this.__update = force => {
-        const
-          w = window.innerWidth,
-          h = window.innerHeight;
+        const [ w, h ] = getSize();
 
         if (h !== this.height) {
           this.height = h;
@@ -687,11 +703,7 @@
       };
 
       const start = () => {
-        const
-          style = getComputedStyle(document.body),
-          target = window.visualViewport !== void 0
-            ? window.visualViewport
-            : window;
+        const style = getComputedStyle(document.body);
 
         // if css props available
         if (style.getPropertyValue('--q-size-sm')) {
@@ -1447,7 +1459,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.4.10' };
+      const $q = { version: '2.5.0' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -1646,7 +1658,7 @@
       const onScreen = vue.ref(false);
       const animate = vue.ref(true);
 
-      let calls = 0, timer, speed;
+      let sessions = 0, timer, speed;
 
       const classes = vue.computed(() =>
         `q-loading-bar q-loading-bar--${ props.position }`
@@ -1692,16 +1704,17 @@
         const oldSpeed = speed;
         speed = Math.max(0, newSpeed) || 0;
 
-        calls++;
+        sessions++;
 
-        if (calls > 1) {
+        if (sessions > 1) {
           if (oldSpeed === 0 && newSpeed > 0) {
             planNextStep();
           }
           else if (oldSpeed > 0 && newSpeed <= 0) {
             clearTimeout(timer);
           }
-          return
+
+          return sessions
         }
 
         clearTimeout(timer);
@@ -1709,25 +1722,32 @@
 
         progress.value = 0;
 
-        if (onScreen.value === true) { return }
-
-        onScreen.value = true;
-        animate.value = false;
         timer = setTimeout(() => {
           animate.value = true;
           newSpeed > 0 && planNextStep();
-        }, 100);
+        }, onScreen.value === true ? 500 : 1);
+
+        if (onScreen.value !== true) {
+          onScreen.value = true;
+          animate.value = false;
+        }
+
+        return sessions
       }
 
       function increment (amount) {
-        if (calls > 0) {
+        if (sessions > 0) {
           progress.value = inc(progress.value, amount);
         }
+
+        return sessions
       }
 
       function stop () {
-        calls = Math.max(0, calls - 1);
-        if (calls > 0) { return }
+        sessions = Math.max(0, sessions - 1);
+        if (sessions > 0) {
+          return sessions
+        }
 
         clearTimeout(timer);
         emit('stop');
@@ -1746,6 +1766,8 @@
         else {
           end();
         }
+
+        return sessions
       }
 
       function planNextStep () {
@@ -2316,19 +2338,25 @@
     }
   }
 
+  function fillNormalizedVNodes (children, vnode) {
+    if (typeof vnode.type === 'symbol') {
+      if (Array.isArray(vnode.children) === true) {
+        vnode.children.forEach(child => {
+          fillNormalizedVNodes(children, child);
+        });
+      }
+    }
+    else {
+      children.add(vnode);
+    }
+  }
+
   // vnodes from rendered in advanced slots
   function getNormalizedVNodes (vnodes) {
     const children = new Set();
 
     vnodes.forEach(vnode => {
-      if (typeof vnode.type === 'symbol' && Array.isArray(vnode.children) === true) {
-        vnode.children.forEach(child => {
-          children.add(child);
-        });
-      }
-      else {
-        children.add(vnode);
-      }
+      fillNormalizedVNodes(children, vnode);
     });
 
     return Array.from(children)
@@ -2379,7 +2407,7 @@
           hSlot(slots.default)
         );
 
-        if (vnodes === void 0) { return }
+        if (vnodes.length === 0) { return }
 
         let els = 1;
 
@@ -4040,7 +4068,7 @@
     vue.watch(() => props.modelValue, processModelChange);
 
     if (hideOnRouteChange !== void 0 && vmHasRouter(vm) === true) {
-      vue.watch(() => proxy.$route, () => {
+      vue.watch(() => proxy.$route.fullPath, () => {
         if (hideOnRouteChange.value === true && showing.value === true) {
           hide();
         }
@@ -5112,7 +5140,7 @@
 
           if (node && node.contains(document.activeElement) !== true) {
             node = node.querySelector('[autofocus], [data-autofocus]') || node;
-            node.focus();
+            node.focus({ preventScroll: true });
           }
         });
       }
@@ -5240,6 +5268,7 @@
         // the focus is not in a vue child component
         if (
           handlesFocus.value === true
+          && props.noFocus !== true
           && childHasFocus(innerRef.value, evt.target) !== true
         ) {
           focus();
@@ -6394,7 +6423,7 @@
     let historyEntry, fullscreenFillerNode, container;
     const inFullscreen = vue.ref(false);
 
-    vmHasRouter(vm) === true && vue.watch(() => proxy.$route, () => {
+    vmHasRouter(vm) === true && vue.watch(() => proxy.$route.fullPath, () => {
       props.noRouteFullscreenExit !== true && exitFullscreen();
     });
 
@@ -7151,6 +7180,10 @@
     falseValue: { default: false },
     indeterminateValue: { default: null },
 
+    checkedIcon: String,
+    uncheckedIcon: String,
+    indeterminateIcon: String,
+
     toggleOrder: {
       type: String,
       validator: v => v === 'tf' || v === 'ft'
@@ -7363,6 +7396,7 @@
   }
 
   const bgNode = vue.h('div', {
+    key: 'svg',
     class: 'q-checkbox__bg absolute'
   }, [
     vue.h('svg', {
@@ -7389,8 +7423,36 @@
     props: useCheckboxProps,
     emits: useCheckboxEmits,
 
-    setup () {
-      return useCheckbox('checkbox', () => () => [ bgNode ])
+    setup (props) {
+      function getInner (isTrue, isIndeterminate) {
+        const icon = vue.computed(() =>
+          (isTrue.value === true
+            ? props.checkedIcon
+            : (isIndeterminate.value === true
+                ? props.indeterminateIcon
+                : props.uncheckedIcon
+              )
+          ) || null
+        );
+
+        return () => (
+          icon.value !== null
+            ? [
+                vue.h('div', {
+                  key: 'icon',
+                  class: 'q-checkbox__icon-container absolute flex flex-center no-wrap'
+                }, [
+                  vue.h(QIcon, {
+                    class: 'q-checkbox__icon',
+                    name: icon.value
+                  })
+                ])
+              ]
+            : [ bgNode ]
+        )
+      }
+
+      return useCheckbox('checkbox', getInner)
     }
   });
 
@@ -9690,7 +9752,15 @@
         unwatchRoute !== void 0 && unwatchRoute();
       });
 
-      vue.onActivated(recalculateScroll);
+      let shouldActivate = false;
+
+      vue.onDeactivated(() => {
+        shouldActivate = true;
+      });
+
+      vue.onActivated(() => {
+        shouldActivate === true && recalculateScroll();
+      });
 
       return () => {
         const child = [
@@ -11720,16 +11790,16 @@
       month += sign * mod.months;
     }
 
-    if (mod.days !== void 0) {
-      day += sign * mod.days;
-    }
-
     date.setDate(1);
     date.setMonth(2);
 
     date.setFullYear(year);
     date.setMonth(month);
-    date.setDate(day);
+    date.setDate(Math.min(day, daysInMonth(date)));
+
+    if (mod.days !== void 0) {
+      date.setDate(date.getDate() + sign * mod.days);
+    }
 
     return date
   }
@@ -14390,7 +14460,7 @@
           }
 
           node = node.querySelector('[autofocus], [data-autofocus]') || node;
-          node.focus();
+          node.focus({ preventScroll: true });
         });
       }
 
@@ -16892,7 +16962,7 @@
 
       function focus () {
         addFocusFn(() => {
-          contentRef.value !== null && contentRef.value.focus();
+          contentRef.value !== null && contentRef.value.focus({ preventScroll: true });
         });
       }
 
@@ -20190,12 +20260,16 @@
     let validateIndex = 0, unwatchRules;
 
     const hasRules = vue.computed(() =>
-      props.disable !== true
-      && props.rules !== void 0
+      props.rules !== void 0
       && props.rules !== null
       && props.rules.length > 0
     );
 
+    const hasActiveRules = vue.computed(() =>
+      props.disable !== true
+      && hasRules.value === true
+    );
+
     const hasError = vue.computed(() =>
       props.error === true || innerError.value === true
     );
@@ -20233,7 +20307,7 @@
       else if (isDirtyModel.value === false) {
         isDirtyModel.value = true;
 
-        if (hasRules.value === true && props.lazyRules !== 'ondemand') {
+        if (hasActiveRules.value === true && props.lazyRules !== 'ondemand') {
           debouncedValidate();
         }
       }
@@ -20255,7 +20329,7 @@
      *   - Promise (pending async validation)
      */
     function validate (val = props.modelValue) {
-      if (hasRules.value !== true) {
+      if (hasActiveRules.value !== true) {
         return true
       }
 
@@ -20343,7 +20417,7 @@
 
     function validateIfNeeded (changedRules) {
       if (
-        hasRules.value === true
+        hasActiveRules.value === true
         && props.lazyRules !== 'ondemand'
         && (isDirtyModel.value === true || (props.lazyRules !== true && changedRules !== true))
       ) {
@@ -20629,7 +20703,7 @@
       if (target && (el === null || el.id !== state.targetUid.value)) {
         target.hasAttribute('tabindex') === true || (target = target.querySelector('[tabindex]'));
         if (target && target !== el) {
-          target.focus();
+          target.focus({ preventScroll: true });
         }
       }
     }
@@ -20647,6 +20721,7 @@
     }
 
     function onControlFocusin (e) {
+      clearTimeout(focusoutTimer);
       if (state.editable.value === true && state.focused.value === false) {
         state.focused.value = true;
         emit('focus', e);
@@ -20659,13 +20734,9 @@
         if (
           document.hasFocus() === true && (
             state.hasPopupOpen === true
-            || (
-              state.controlRef !== void 0
-              && (
-                state.controlRef.value === null
-                || state.controlRef.value.contains(document.activeElement) !== false
-              )
-            )
+            || state.controlRef === void 0
+            || state.controlRef.value === null
+            || state.controlRef.value.contains(document.activeElement) !== false
           )
         ) {
           return
@@ -20891,6 +20962,16 @@
     // expose public methods
     Object.assign(proxy, { focus, blur });
 
+    let shouldActivate = false;
+
+    vue.onDeactivated(() => {
+      shouldActivate = true;
+    });
+
+    vue.onActivated(() => {
+      shouldActivate === true && props.autofocus === true && proxy.focus();
+    });
+
     vue.onMounted(() => {
       if (isRuntimeSsrPreHydration.value === true && props.for === void 0) {
         state.targetUid.value = getTargetUid();
@@ -21600,7 +21681,7 @@
           const target = rootRef.value.querySelector('[autofocus], [data-autofocus]')
             || Array.prototype.find.call(rootRef.value.querySelectorAll('[tabindex]'), el => el.tabIndex > -1);
 
-          target !== null && target !== void 0 && target.focus();
+          target !== null && target !== void 0 && target.focus({ preventScroll: true });
         });
       }
 
@@ -21617,6 +21698,16 @@
         }
       });
 
+      let shouldActivate = false;
+
+      vue.onDeactivated(() => {
+        shouldActivate = true;
+      });
+
+      vue.onActivated(() => {
+        shouldActivate === true && props.autofocus === true && focus();
+      });
+
       vue.onMounted(() => {
         props.autofocus === true && focus();
       });
@@ -22174,7 +22265,6 @@
       const rootRef = vue.ref(null);
 
       let index = props.initialIndex || 0;
-      let scrollPos = false;
       let localScrollTarget, poll;
 
       const classes = vue.computed(() =>
@@ -22313,8 +22403,10 @@
       vue.watch(() => props.scrollTarget, updateScrollTarget);
       vue.watch(() => props.debounce, setDebounce);
 
+      let scrollPos = false;
+
       vue.onActivated(() => {
-        if (localScrollTarget && scrollPos !== false) {
+        if (scrollPos !== false && localScrollTarget) {
           setVerticalScrollPosition(localScrollTarget, scrollPos);
         }
       });
@@ -23121,6 +23213,15 @@
         return attrs
       });
 
+      // some browsers lose the native input value
+      // so we need to reattach it dynamically
+      // (like type="password" <-> type="text"; see #12078)
+      vue.watch(() => props.type, () => {
+        if (inputRef.value) {
+          inputRef.value.value = props.modelValue;
+        }
+      });
+
       vue.watch(() => props.modelValue, v => {
         if (hasMask.value === true) {
           if (stopValueWatcher === true) {
@@ -23173,7 +23274,7 @@
             && inputRef.value !== el
             && (el === null || el.id !== state.targetUid.value)
           ) {
-            inputRef.value.focus();
+            inputRef.value.focus({ preventScroll: true });
           }
         });
       }
@@ -24340,6 +24441,7 @@
   });
 
   const svg$m = vue.h('svg', {
+    key: 'svg',
     class: 'q-radio__bg absolute non-selectable',
     viewBox: '0 0 24 24',
     'aria-hidden': 'true'
@@ -24368,6 +24470,9 @@
       label: String,
       leftLabel: Boolean,
 
+      checkedIcon: String,
+      uncheckedIcon: String,
+
       color: String,
       keepColor: Boolean,
       dense: Boolean,
@@ -24409,6 +24514,13 @@
           + `q-radio__inner--${ isTrue.value === true ? 'truthy' : 'falsy' }${ color }`
       });
 
+      const icon = vue.computed(() =>
+        (isTrue.value === true
+          ? props.checkedIcon
+          : props.uncheckedIcon
+        ) || null
+      );
+
       const tabindex = vue.computed(() => (
         props.disable === true ? -1 : props.tabindex || 0
       ));
@@ -24454,7 +24566,19 @@
       Object.assign(proxy, { set: onClick });
 
       return () => {
-        const content = [ svg$m ];
+        const content = icon.value !== null
+          ? [
+              vue.h('div', {
+                key: 'icon',
+                class: 'q-radio__icon-container absolute flex flex-center no-wrap'
+              }, [
+                vue.h(QIcon, {
+                  class: 'q-radio__icon',
+                  name: icon.value
+                })
+              ])
+            ]
+          : [ svg$m ];
 
         props.disable !== true && injectFormInput(
           content,
@@ -24506,10 +24630,6 @@
       ...useCheckboxProps,
 
       icon: String,
-      checkedIcon: String,
-      uncheckedIcon: String,
-      indeterminateIcon: String,
-
       iconColor: String
     },
 
@@ -24517,29 +24637,25 @@
 
     setup (props) {
       function getInner (isTrue, isIndeterminate) {
-        const computedIcon = vue.computed(() =>
+        const icon = vue.computed(() =>
           (isTrue.value === true
             ? props.checkedIcon
             : (isIndeterminate.value === true ? props.indeterminateIcon : props.uncheckedIcon)
           ) || props.icon
         );
 
-        const computedIconColor = vue.computed(() => {
-          if (isTrue.value === true) {
-            return props.iconColor
-          }
-        });
+        const color = vue.computed(() => (isTrue.value === true ? props.iconColor : null));
 
         return () => [
           vue.h('div', { class: 'q-toggle__track' }),
 
           vue.h('div', {
             class: 'q-toggle__thumb absolute flex flex-center no-wrap'
-          }, computedIcon.value !== void 0
+          }, icon.value !== void 0
             ? [
                 vue.h(QIcon, {
-                  name: computedIcon.value,
-                  color: computedIconColor.value
+                  name: icon.value,
+                  color: color.value
                 })
               ]
             : void 0
@@ -27110,6 +27226,26 @@
         }
       });
 
+      let scrollPosition = null;
+
+      vue.onDeactivated(() => {
+        scrollPosition = {
+          top: scroll.vertical.position.value,
+          left: scroll.horizontal.position.value
+        };
+      });
+
+      vue.onActivated(() => {
+        if (scrollPosition === null) { return }
+
+        const scrollTarget = targetRef.value;
+
+        if (scrollTarget !== null) {
+          setHorizontalScrollPosition(scrollTarget, scrollPosition.left);
+          setVerticalScrollPosition(scrollTarget, scrollPosition.top);
+        }
+      });
+
       vue.onBeforeUnmount(emitScroll.cancel);
 
       return () => {
@@ -27737,13 +27873,14 @@
       prevToIndex = -1;
       prevScrollStart = void 0;
 
+      virtualScrollPaddingBefore.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, 0, virtualScrollSliceRange.value.from);
+      virtualScrollPaddingAfter.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, virtualScrollSliceRange.value.to, virtualScrollLength.value);
+
       if (toIndex >= 0) {
         updateVirtualScrollSizes(virtualScrollSliceRange.value.from);
         vue.nextTick(() => { scrollTo(toIndex); });
       }
       else {
-        virtualScrollPaddingBefore.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, 0, virtualScrollSliceRange.value.from);
-        virtualScrollPaddingAfter.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, virtualScrollSliceRange.value.to, virtualScrollLength.value);
         onVirtualScrollEvt();
       }
     }
@@ -27768,22 +27905,24 @@
 
       localScrollViewSize = scrollViewSize;
 
-      const multiplier = 1 + props.virtualScrollSliceRatioBefore + props.virtualScrollSliceRatioAfter;
+      const virtualScrollSliceRatioBefore = parseFloat(props.virtualScrollSliceRatioBefore) || 0;
+      const virtualScrollSliceRatioAfter = parseFloat(props.virtualScrollSliceRatioAfter) || 0;
+      const multiplier = 1 + virtualScrollSliceRatioBefore + virtualScrollSliceRatioAfter;
       const view = scrollViewSize === void 0 || scrollViewSize <= 0
         ? 1
         : Math.ceil(scrollViewSize / virtualScrollItemSizeComputed.value);
 
       const baseSize = Math.max(
-        10,
+        1,
         view,
-        Math.ceil(props.virtualScrollSliceSize / multiplier)
+        Math.ceil((props.virtualScrollSliceSize > 0 ? props.virtualScrollSliceSize : 10) / multiplier)
       );
 
       virtualScrollSliceSizeComputed.value = {
         total: Math.ceil(baseSize * multiplier),
-        start: Math.ceil(baseSize * props.virtualScrollSliceRatioBefore),
-        center: Math.ceil(baseSize * (0.5 + props.virtualScrollSliceRatioBefore)),
-        end: Math.ceil(baseSize * (1 + props.virtualScrollSliceRatioBefore)),
+        start: Math.ceil(baseSize * virtualScrollSliceRatioBefore),
+        center: Math.ceil(baseSize * (0.5 + virtualScrollSliceRatioBefore)),
+        end: Math.ceil(baseSize * (1 + virtualScrollSliceRatioBefore)),
         view
       };
     }
@@ -27869,7 +28008,15 @@
       setVirtualScrollSize();
     });
 
+    let shouldActivate = false;
+
+    vue.onDeactivated(() => {
+      shouldActivate = true;
+    });
+
     vue.onActivated(() => {
+      if (shouldActivate !== true) { return }
+
       const scrollEl = getVirtualScrollTarget();
 
       if (prevScrollStart !== void 0 && scrollEl !== void 0 && scrollEl !== null && scrollEl.nodeType !== 8) {
@@ -28496,8 +28643,12 @@
         return innerOptionsValue.value.find(v => isDeepEqual(v, val)) !== void 0
       }
 
-      function selectInputText () {
-        if (props.useInput === true && targetRef.value !== null) {
+      function selectInputText (e) {
+        if (
+          props.useInput === true
+          && targetRef.value !== null
+          && (e === void 0 || (targetRef.value === e.target && e.target.value === selectedString.value))
+        ) {
           targetRef.value.select();
         }
       }
@@ -28867,7 +29018,7 @@
           type: 'search',
           ...comboboxAttrs.value,
           ...state.splitAttrs.attributes.value,
-          id: state.targetUid.value,
+          id: isTarget === true ? state.targetUid.value : void 0,
           maxlength: props.maxlength,
           autocomplete: props.autocomplete,
           'data-autofocus': (fromDialog !== true && props.autofocus === true) || void 0,
@@ -28878,7 +29029,7 @@
 
         if (fromDialog !== true && hasDialog === true) {
           if (Array.isArray(data.class) === true) {
-            data.class[ 0 ] += ' no-pointer-events';
+            data.class = [ ...data.class, 'no-pointer-events' ];
           }
           else {
             data.class += ' no-pointer-events';
@@ -29271,7 +29422,7 @@
         filter, updateMenuPosition, updateInputValue,
         isOptionSelected,
         getEmittingOptionValue,
-        isOptionDisabled: (...args) => isOptionDisabled.value.apply(null, args),
+        isOptionDisabled: (...args) => isOptionDisabled.value.apply(null, args) === true,
         getOptionValue: (...args) => getOptionValue.value.apply(null, args),
         getOptionLabel: (...args) => getOptionLabel.value.apply(null, args)
       });
@@ -29344,13 +29495,13 @@
             child.push(getInput(fromDialog, isTarget));
           }
           // there can be only one (when dialog is opened the control in dialog should be target)
-          else if (state.editable.value === true && isTarget === true) {
+          else if (state.editable.value === true) {
             child.push(
               vue.h('div', {
-                ref: targetRef,
+                ref: isTarget === true ? targetRef : void 0,
                 key: 'd_t',
                 class: 'q-select__focus-target',
-                id: state.targetUid.value,
+                id: isTarget === true ? state.targetUid.value : void 0,
                 ...comboboxAttrs.value,
                 onKeydown: onTargetKeydown,
                 onKeyup: onTargetKeyup,
@@ -29358,7 +29509,7 @@
               })
             );
 
-            if (typeof props.autocomplete === 'string' && props.autocomplete.length > 0) {
+            if (isTarget === true && typeof props.autocomplete === 'string' && props.autocomplete.length > 0) {
               child.push(
                 vue.h('input', {
                   class: 'q-select__autocomplete-input',
@@ -32067,7 +32218,9 @@
       error: Boolean
     },
 
-    setup (props, { slots }) {
+    setup (props, { attrs, slots }) {
+      const { proxy: { $q } } = vue.getCurrentInstance();
+
       const $stepper = vue.inject(stepperKey, () => {
         console.error('QStep needs to be child of QStepper');
       });
@@ -32078,18 +32231,21 @@
 
       const isActive = vue.computed(() => $stepper.value.modelValue === props.name);
 
-      vue.watch(isActive, active => {
-        if (
-          active === true
-          && $stepper.value.vertical === true
-        ) {
-          vue.nextTick(() => {
-            if (rootRef.value !== null) {
-              rootRef.value.scrollTop = 0;
+      const scrollEvent = vue.computed(() => (
+        ($q.platform.is.ios !== true && $q.platform.is.chrome === true)
+          || isActive.value !== true
+          || $stepper.value.vertical !== true
+          ? {}
+          : {
+            onScroll (e) {
+              const { target } = e;
+              if (target.scrollTop > 0) {
+                target.scrollTop = 0;
+              }
+              attrs.onScroll !== void 0 && attrs.onScroll(e);
             }
-          });
-        }
-      });
+          }
+      ));
 
       const contentKey = vue.computed(() => (
         typeof props.name === 'string' || typeof props.name === 'number'
@@ -32125,7 +32281,7 @@
 
       return () => vue.h(
         'div',
-        { ref: rootRef, class: 'q-stepper__step' },
+        { ref: rootRef, class: 'q-stepper__step', ...scrollEvent.value },
         $stepper.value.vertical === true
           ? [
               vue.h(StepHeader, {
@@ -35895,9 +36051,11 @@
 
         if (hasSelection.value) {
           if (meta.selectable) {
-            const val = meta.key !== props.selected ? meta.key : null;
-            if (props.noSelectionUnset !== true || val !== null) {
-              emit('update:selected', val);
+            if (props.noSelectionUnset === false) {
+              emit('update:selected', meta.key !== props.selected ? meta.key : null);
+            }
+            else if (meta.key !== props.selected) {
+              emit('update:selected', meta.key || null);
             }
           }
         }
@@ -38339,11 +38497,11 @@
       Object.assign(this, {
         start (speed) {
           barRef.value.start(speed);
-          Plugin$3.isActive = barRef.value.calls > 0;
+          Plugin$3.isActive = true;
         },
         stop () {
-          barRef.value.stop();
-          Plugin$3.isActive = barRef.value.calls > 0;
+          const sessions = barRef.value.stop();
+          Plugin$3.isActive = sessions > 0;
         },
         increment () {
           barRef.value.increment.apply(null, arguments);
@@ -39281,7 +39439,7 @@
   });
 
   var index_umd = {
-    version: '2.4.10',
+    version: '2.5.0',
     install (app, opts) {
       installQuasar(app, {
         components,