quasar 2.4.11 → 2.4.12

package/dist/ssr-directives/Morph.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.4.11
+ * Quasar Framework v2.4.12
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */

package/dist/web-types/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.4.11",
+  "version": "2.4.12",
   "contributions": {
     "html": {
       "types-syntax": "typescript",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.4.11",
+  "version": "2.4.12",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "main": "dist/quasar.cjs.prod.js",
   "module": "dist/quasar.esm.prod.js",

package/src/components/dialog/QDialog.js

@@ -257,7 +257,7 @@ export default createComponent({
         }
 
         node = node.querySelector('[autofocus], [data-autofocus]') || node
-        node.focus()
+        node.focus({ preventScroll: true })
       })
     }
 

package/src/components/editor/QEditor.js

@@ -454,7 +454,7 @@ export default createComponent({
 
     function focus () {
       addFocusFn(() => {
-        contentRef.value !== null && contentRef.value.focus()
+        contentRef.value !== null && contentRef.value.focus({ preventScroll: true })
       })
     }
 

package/src/components/form/QForm.js

@@ -144,7 +144,7 @@ export default createComponent({
         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 })
       })
     }
 

package/src/components/input/QInput.js

@@ -177,7 +177,7 @@ export default createComponent({
           && inputRef.value !== el
           && (el === null || el.id !== state.targetUid.value)
         ) {
-          inputRef.value.focus()
+          inputRef.value.focus({ preventScroll: true })
         }
       })
     }

package/src/components/menu/QMenu.js

@@ -181,7 +181,7 @@ export default createComponent({
 
         if (node && node.contains(document.activeElement) !== true) {
           node = node.querySelector('[autofocus], [data-autofocus]') || node
-          node.focus()
+          node.focus({ preventScroll: true })
         }
       })
     }
@@ -309,6 +309,7 @@ export default createComponent({
       // the focus is not in a vue child component
       if (
         handlesFocus.value === true
+        && props.noFocus !== true
         && childHasFocus(innerRef.value, evt.target) !== true
       ) {
         focus()

package/src/components/select/QSelect.js

@@ -610,8 +610,12 @@ export default createComponent({
       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()
       }
     }
@@ -981,7 +985,7 @@ export default createComponent({
         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,
@@ -992,7 +996,7 @@ export default createComponent({
 
       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'
@@ -1458,13 +1462,13 @@ export default createComponent({
           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(
             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,
@@ -1472,7 +1476,7 @@ export default createComponent({
             })
           )
 
-          if (typeof props.autocomplete === 'string' && props.autocomplete.length > 0) {
+          if (isTarget === true && typeof props.autocomplete === 'string' && props.autocomplete.length > 0) {
             child.push(
               h('input', {
                 class: 'q-select__autocomplete-input',

package/src/components/select/QSelect.sass

@@ -8,6 +8,7 @@
 
   .q-field__input
     min-width: 50px !important
+    cursor: text
 
     &--padding
       padding-left: 4px

package/src/components/stepper/QStep.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, nextTick, inject, KeepAlive } from 'vue'
+import { h, ref, computed, inject, getCurrentInstance, KeepAlive } from 'vue'
 
 import QSlideTransition from '../slide-transition/QSlideTransition.js'
 import StepHeader from './StepHeader.js'
@@ -56,7 +56,9 @@ export default createComponent({
     error: Boolean
   },
 
-  setup (props, { slots }) {
+  setup (props, { attrs, slots }) {
+    const { proxy: { $q } } = getCurrentInstance()
+
     const $stepper = inject(stepperKey, () => {
       console.error('QStep needs to be child of QStepper')
     })
@@ -67,18 +69,21 @@ export default createComponent({
 
     const isActive = computed(() => $stepper.value.modelValue === props.name)
 
-    watch(isActive, active => {
-      if (
-        active === true
-        && $stepper.value.vertical === true
-      ) {
-        nextTick(() => {
-          if (rootRef.value !== null) {
-            rootRef.value.scrollTop = 0
+    const scrollEvent = computed(() => (
+      ($q.platform.is.ios !== true && $q.platform.is.safari !== 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 = computed(() => (
       typeof props.name === 'string' || typeof props.name === 'number'
@@ -114,7 +119,7 @@ export default createComponent({
 
     return () => h(
       'div',
-      { ref: rootRef, class: 'q-stepper__step' },
+      { ref: rootRef, class: 'q-stepper__step', ...scrollEvent.value },
       $stepper.value.vertical === true
         ? [
             h(StepHeader, {

package/src/components/stepper/QStepper.sass

@@ -13,6 +13,7 @@
     line-height: 14px
 
   &__dot
+    contain: layout
     margin-right: 8px
     font-size: 14px
     width: 24px
@@ -20,6 +21,7 @@
     height: 24px
     border-radius: 50%
     background: currentColor
+
     span
       color: #fff
 
@@ -133,6 +135,7 @@
     .q-stepper__tab
       overflow: hidden
     .q-stepper__line
+      contain: layout
       &:before, &:after
         position: absolute
         top: 50%

package/src/components/virtual-scroll/use-virtual-scroll.js

@@ -559,13 +559,14 @@ export function useVirtualScroll ({
     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)
       nextTick(() => { scrollTo(toIndex) })
     }
     else {
-      virtualScrollPaddingBefore.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, 0, virtualScrollSliceRange.value.from)
-      virtualScrollPaddingAfter.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, virtualScrollSliceRange.value.to, virtualScrollLength.value)
       onVirtualScrollEvt()
     }
   }

package/src/composables/private/use-field.js

@@ -270,7 +270,7 @@ export default function (state) {
     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 })
       }
     }
   }
@@ -288,6 +288,7 @@ export default function (state) {
   }
 
   function onControlFocusin (e) {
+    clearTimeout(focusoutTimer)
     if (state.editable.value === true && state.focused.value === false) {
       state.focused.value = true
       emit('focus', e)
@@ -300,13 +301,9 @@ export default function (state) {
       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