feat(autofocus/keep-alive): refocus autofocus components on activate in keepAlive

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

@@ -72,6 +72,8 @@
 </template>
 
 <script>
+import { QInput, QForm } from 'quasar'
+
 export default {
   components: {
     KeepAliveTest: {
@@ -81,6 +83,12 @@ export default {
         name: String
       },
 
+      data () {
+        return {
+          text: 'input text sample'
+        }
+      },
+
       created () {
         this.log('created')
       },
@@ -93,6 +101,14 @@ export default {
         this.log('mounted')
       },
 
+      activated () {
+        this.log('activated')
+      },
+
+      deactivated () {
+        this.log('deactivated')
+      },
+
       beforeDestroy () {
         this.log('beforeDestroy')
       },
@@ -108,7 +124,30 @@ export default {
       },
 
       render (h) {
-        return h('div', [ 'keep alive test ' + this.name ])
+        return h('div', [
+          'keep alive test ' + this.name,
+          h(QForm, {
+            props: {
+              autofocus: true
+            }
+          }, [
+            h(QInput, {
+              class: 'q-my-md',
+              style: 'max-width: 300px',
+              props: {
+                value: this.text,
+                // autofocus: true,
+                outlined: true,
+                label: 'Input with autofocus'
+              },
+              on: {
+                input: val => {
+                  this.text = val
+                }
+              }
+            })
+          ])
+        ])
       }
     }
   },

ui/src/components/field/QField.js

@@ -596,6 +596,15 @@ export default Vue.extend({
     this.autofocus === true && this.focus()
   },
 
+  activated () {
+    if (this.shouldActivate !== true) { return }
+    this.autofocus === true && this.focus()
+  },
+
+  deactivated () {
+    this.shouldActivate = true
+  },
+
   beforeDestroy () {
     clearTimeout(this.focusoutTimer)
   }

ui/src/components/form/QForm.js

@@ -33,6 +33,15 @@ export default Vue.extend({
     this.autofocus === true && this.focus()
   },
 
+  activated () {
+    if (this.shouldActivate !== true) { return }
+    this.autofocus === true && this.focus()
+  },
+
+  deactivated () {
+    this.shouldActivate = true
+  },
+
   methods: {
     validate (shouldFocus) {
       const promises = []

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

@@ -194,7 +194,7 @@ export default Vue.extend({
   },
 
   activated () {
-    if (this.__scrollTarget && this.__scrollPosition !== void 0) {
+    if (this.__scrollPosition !== void 0 && this.__scrollTarget) {
       setScrollPosition(this.__scrollTarget, this.__scrollPosition)
     }
   },

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

@@ -548,9 +548,11 @@ export default Vue.extend({
   },
 
   activated () {
+    if (this.__scrollPosition === void 0) { return }
+
     const scrollTarget = this.getScrollTarget()
 
-    if (scrollTarget !== void 0 && this.__scrollPosition !== void 0) {
+    if (scrollTarget !== void 0) {
       setHorizontalScrollPosition(scrollTarget, this.__scrollPosition.left)
       setVerticalScrollPosition(scrollTarget, this.__scrollPosition.top)
     }

ui/src/components/tabs/QTabs.js

@@ -590,10 +590,6 @@ export default Vue.extend({
     }
   },
 
-  activated () {
-    this.__recalculateScroll()
-  },
-
   created () {
     this.buffer = []
 
@@ -606,6 +602,15 @@ export default Vue.extend({
     this.rtlHasScrollBug = rtlHasScrollBug()
   },
 
+  activated () {
+    if (this.shouldActivate !== true) { return }
+    this.__recalculateScroll()
+  },
+
+  deactivated () {
+    this.shouldActivate = true
+  },
+
   beforeDestroy () {
     clearTimeout(this.bufferTimer)
     clearTimeout(this.animateTimer)

ui/src/mixins/virtual-scroll.js

@@ -690,6 +690,8 @@ export default {
   },
 
   activated () {
+    if (this.shouldActivate !== true) { return }
+
     const scrollEl = this.__getVirtualScrollTarget()
 
     if (this.prevScrollStart !== void 0 && scrollEl !== void 0 && scrollEl !== null && scrollEl.nodeType !== 8) {
@@ -705,6 +707,10 @@ export default {
     }
   },
 
+  deactivated () {
+    this.shouldActivate = true
+  },
+
   beforeMount () {
     this.__onVirtualScrollEvt = debounce(this.__onVirtualScrollEvt, this.$q.platform.is.ios === true ? 120 : 35)
     this.__setVirtualScrollSize()