feat(keepAlive activate): set autofocus on activate in QField/QForm; restore scroll on activate in QScrollArea (#12087)

* feat(keepAlive activate): set autofocus on activate in QField/QForm; restore scroll on activate in QScrollArea

* chore(QScrollArea): add test case for keepAlive

* chore(keep-alive): add test case for events order

* chore(keep-alive): small tweaks for QScrollArea test

Author: pdanpdan

ui/dev/src/pages/components/scroll-area.vue

@@ -8,46 +8,50 @@
 
     <div style="height: 200px;" />
 
-    <q-scroll-area
-      v-if="!darkVariant"
-      ref="scroll"
-      style="width: 400px; height: 500px;"
-      class="bg-yellow"
-      :visible="alwaysVisible"
-      :bar-style="customBarStyle"
-      :vertical-bar-style="customVBarStyle"
-      :horizontal-bar-style="customHBarStyle"
-      :thumbStyle="customThumbStyle"
-      :vertical-thumb-style="customVThumbStyle"
-      :horizontal-thumb-style="customHThumbStyle"
-      :tabindex="focusable === true ? 0 : void 0"
-    >
-      <div :class="{ 'flex no-wrap' : horizontal }">
-        <div style="margin-top: 150px" />
-        <div style="margin-bottom: 25px" :style="horizontal ? 'width: 160px' : ''" v-for="n in number" :key="n">
-          {{ n }} Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-          <q-btn label="Click" color="primary" />
+    <keep-alive>
+      <q-scroll-area
+        v-if="!darkVariant"
+        key="scl"
+        ref="scroll"
+        style="width: 400px; height: 500px;"
+        class="bg-yellow"
+        :visible="alwaysVisible"
+        :bar-style="customBarStyle"
+        :vertical-bar-style="customVBarStyle"
+        :horizontal-bar-style="customHBarStyle"
+        :thumbStyle="customThumbStyle"
+        :vertical-thumb-style="customVThumbStyle"
+        :horizontal-thumb-style="customHThumbStyle"
+        :tabindex="focusable === true ? 0 : void 0"
+      >
+        <div :class="{ 'flex no-wrap' : horizontal }">
+          <div style="margin-top: 150px" />
+          <div style="margin-bottom: 25px" :style="horizontal ? 'width: 160px' : ''" v-for="n in number" :key="n">
+            {{ n }} Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            <q-btn label="Click" color="primary" />
+          </div>
         </div>
-      </div>
-    </q-scroll-area>
+      </q-scroll-area>
 
-    <q-scroll-area
-      v-else
-      ref="scroll"
-      style="width: 400px; height: 500px;"
-      class="bg-dark text-white q-mt-lg"
-      :visible="alwaysVisible"
-      dark
-      :tabindex="focusable === true ? 0 : void 0"
-    >
-      <div :class="{ 'flex no-wrap' : horizontal }">
-        <div style="margin-top: 150px" />
-        <div style="margin-bottom: 25px" :style="horizontal ? 'width: 160px' : ''" v-for="n in number" :key="n">
-          {{ n }} Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-          <q-btn label="Click" color="primary" />
+      <q-scroll-area
+        v-else
+        key="scd"
+        ref="scroll"
+        style="width: 400px; height: 500px;"
+        class="bg-dark text-white"
+        :visible="alwaysVisible"
+        dark
+        :tabindex="focusable === true ? 0 : void 0"
+      >
+        <div :class="{ 'flex no-wrap' : horizontal }">
+          <div style="margin-top: 150px" />
+          <div style="margin-bottom: 25px" :style="horizontal ? 'width: 160px' : ''" v-for="n in number" :key="n">
+            {{ n }} Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            <q-btn label="Click" color="primary" />
+          </div>
         </div>
-      </div>
-    </q-scroll-area>
+      </q-scroll-area>
+    </keep-alive>
 
     <br>
     <q-btn @click="number--">
@@ -162,7 +166,8 @@ export default {
             backgroundColor: '#888',
             borderRadius: '7px',
             borderStyle: 'solid',
-            borderColor: 'transparent'
+            borderColor: 'transparent',
+            backgroundClip: 'content-box'
           }
         : null
     },

ui/dev/src/pages/web-tests/panel-keep-alive.vue

@@ -73,6 +73,7 @@
 
 <script>
 import { h } from 'vue'
+import { QInput, QForm } from 'quasar'
 
 export default {
   components: {
@@ -83,6 +84,12 @@ export default {
         name: String
       },
 
+      data () {
+        return {
+          text: 'input text sample'
+        }
+      },
+
       created () {
         this.log('created')
       },
@@ -95,12 +102,20 @@ export default {
         this.log('mounted')
       },
 
+      activated () {
+        this.log('activated')
+      },
+
+      deactivated () {
+        this.log('deactivated')
+      },
+
       beforeUnmount () {
         this.log('beforeUnmount')
       },
 
       unmounted () {
-        this.log('destroyed')
+        this.log('unmounted')
       },
 
       methods: {
@@ -110,7 +125,24 @@ export default {
       },
 
       render () {
-        return h('div', [ 'keep alive test ' + this.name ])
+        return h('div', () => ([
+          'keep alive test ' + this.name,
+          h(QForm, {
+            autofocus: true
+          }, () => ([
+            h(QInput, {
+              class: 'q-my-md',
+              style: 'max-width: 300px',
+              modelValue: this.text,
+              // autofocus: true,
+              outlined: true,
+              label: 'Input with autofocus',
+              'onUpdate:model-value': val => {
+                this.text = val
+              }
+            })
+          ]))
+        ]))
       }
     }
   },

ui/src/components/form/QForm.js

@@ -1,4 +1,4 @@
-import { h, ref, onMounted, getCurrentInstance, nextTick, provide } from 'vue'
+import { h, ref, onActivated, onDeactivated, onMounted, getCurrentInstance, nextTick, provide } from 'vue'
 
 import { createComponent } from '../../utils/private/create.js'
 import { stopAndPrevent } from '../../utils/event.js'
@@ -161,6 +161,16 @@ export default createComponent({
       }
     })
 
+    let shouldActivate = false
+
+    onDeactivated(() => {
+      shouldActivate = true
+    })
+
+    onActivated(() => {
+      shouldActivate === true && props.autofocus === true && focus()
+    })
+
     onMounted(() => {
       props.autofocus === true && focus()
     })

ui/src/components/infinite-scroll/QInfiniteScroll.js

@@ -41,7 +41,6 @@ export default createComponent({
     const rootRef = ref(null)
 
     let index = props.initialIndex || 0
-    let scrollPos = false
     let localScrollTarget, poll
 
     const classes = computed(() =>
@@ -180,8 +179,10 @@ export default createComponent({
     watch(() => props.scrollTarget, updateScrollTarget)
     watch(() => props.debounce, setDebounce)
 
+    let scrollPos = false
+
     onActivated(() => {
-      if (localScrollTarget && scrollPos !== false) {
+      if (scrollPos !== false && localScrollTarget) {
         setVerticalScrollPosition(localScrollTarget, scrollPos)
       }
     })

ui/src/components/scroll-area/QScrollArea.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, withDirectives, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { h, ref, computed, withDirectives, onActivated, onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
@@ -380,6 +380,26 @@ export default createComponent({
       }
     })
 
+    let scrollPosition = null
+
+    onDeactivated(() => {
+      scrollPosition = {
+        top: scroll.vertical.position.value,
+        left: scroll.horizontal.position.value
+      }
+    })
+
+    onActivated(() => {
+      if (scrollPosition === null) { return }
+
+      const scrollTarget = targetRef.value
+
+      if (scrollTarget !== null) {
+        setHorizontalScrollPosition(scrollTarget, scrollPosition.left)
+        setVerticalScrollPosition(scrollTarget, scrollPosition.top)
+      }
+    })
+
     onBeforeUnmount(emitScroll.cancel)
 
     return () => {

ui/src/components/tabs/QTabs.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, nextTick, onBeforeUnmount, onActivated, getCurrentInstance, provide } from 'vue'
+import { h, ref, computed, watch, nextTick, onBeforeUnmount, onActivated, onDeactivated, getCurrentInstance, provide } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 import QResizeObserver from '../resize-observer/QResizeObserver.js'
@@ -568,7 +568,15 @@ export default createComponent({
       unwatchRoute !== void 0 && unwatchRoute()
     })
 
-    onActivated(recalculateScroll)
+    let shouldActivate = false
+
+    onDeactivated(() => {
+      shouldActivate = true
+    })
+
+    onActivated(() => {
+      shouldActivate === true && recalculateScroll()
+    })
 
     return () => {
       const child = [

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

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, onActivated, onBeforeMount, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, onActivated, onDeactivated, onBeforeMount, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
 
 import debounce from '../../utils/debounce.js'
 import { noop } from '../../utils/event.js'
@@ -691,7 +691,15 @@ export function useVirtualScroll ({
     setVirtualScrollSize()
   })
 
+  let shouldActivate = false
+
+  onDeactivated(() => {
+    shouldActivate = true
+  })
+
   onActivated(() => {
+    if (shouldActivate !== true) { return }
+
     const scrollEl = getVirtualScrollTarget()
 
     if (prevScrollStart !== void 0 && scrollEl !== void 0 && scrollEl !== null && scrollEl.nodeType !== 8) {

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

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, Transition, nextTick, onBeforeUnmount, onMounted, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, Transition, nextTick, onActivated, onDeactivated, onBeforeUnmount, onMounted, getCurrentInstance } from 'vue'
 
 import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
 
@@ -532,6 +532,16 @@ export default function (state) {
   // expose public methods
   Object.assign(proxy, { focus, blur })
 
+  let shouldActivate = false
+
+  onDeactivated(() => {
+    shouldActivate = true
+  })
+
+  onActivated(() => {
+    shouldActivate === true && props.autofocus === true && proxy.focus()
+  })
+
   onMounted(() => {
     if (isRuntimeSsrPreHydration.value === true && props.for === void 0) {
       state.targetUid.value = getTargetUid()