feat(QDrawer/QHeader/QFooter): Prevent getting keyboard focus when hidden (quasarframework#6732)

Author: pdanpdan

ui/src/components/drawer/QDrawer.js

@@ -280,6 +280,7 @@ export default Vue.extend({
       return `q-drawer--${this.side}` +
         (this.bordered === true ? ' q-drawer--bordered' : '') +
         (this.isDark === true ? ' q-drawer--dark q-dark' : '') +
+        (this.showing !== true ? ' q-layout--prevent-focus' : '') +
         (
           this.belowBreakpoint === true
             ? ' fixed q-drawer--on-top q-drawer--mobile q-drawer--top-padding'
@@ -450,6 +451,7 @@ export default Vue.extend({
           this.__applyBackdrop(0)
           this.__applyPosition(this.stateDirection * width)
           el.classList.remove('q-drawer--delimiter')
+          el.classList.add('q-layout--prevent-focus')
         }
 
         return
@@ -468,6 +470,7 @@ export default Vue.extend({
         const el = this.$refs.content
         el.classList.add('no-transition')
         el.classList.add('q-drawer--delimiter')
+        el.classList.remove('q-layout--prevent-focus')
       }
     },
 

ui/src/components/footer/QFooter.js

@@ -101,16 +101,20 @@ export default Vue.extend({
       return offset > 0 ? offset : 0
     },
 
+    hidden () {
+      return this.value !== true || (this.fixed === true && this.revealed !== true)
+    },
+
+    revealOnFocus () {
+      return this.value === true && this.hidden === true && this.reveal === true
+    },
+
     classes () {
-      return (
-        (this.fixed === true ? 'fixed' : 'absolute') + '-bottom') +
-        (this.value === true || this.fixed === true ? '' : ' hidden') +
+      return (this.fixed === true ? 'fixed' : 'absolute') + '-bottom' +
         (this.bordered === true ? ' q-footer--bordered' : '') +
-        (
-          this.value !== true || (this.fixed === true && this.revealed !== true)
-            ? ' q-footer--hidden'
-            : ''
-        )
+        (this.hidden === true ? ' q-footer--hidden' : '') +
+        (this.value !== true ? ' q-layout--prevent-focus' : '') +
+        (this.value !== true && this.fixed !== true ? ' hidden' : '')
     },
 
     style () {
@@ -130,12 +134,12 @@ export default Vue.extend({
   },
 
   render (h) {
-    const child = [
+    const child = mergeSlot([
       h(QResizeObserver, {
         props: { debounce: 0 },
         on: cache(this, 'resize', { resize: this.__onResize })
       })
-    ]
+    ], this, 'default')
 
     this.elevated === true && child.push(
       h('div', {
@@ -148,10 +152,11 @@ export default Vue.extend({
       class: this.classes,
       style: this.style,
       on: {
+        focusin: this.__onFocusin,
         ...this.$listeners,
         input: stop
       }
-    }, mergeSlot(child, this, 'default'))
+    }, child)
   },
 
   created () {
@@ -198,6 +203,12 @@ export default Vue.extend({
         position - inflexionPosition < 100 ||
         this.layout.height - this.containerHeight - position - this.size < 300
       ))
+    },
+
+    __onFocusin () {
+      if (this.revealOnFocus === true) {
+        this.__updateLocal('revealed', true)
+      }
     }
   }
 })

ui/src/components/header/QHeader.js

@@ -89,15 +89,19 @@ export default Vue.extend({
       return offset > 0 ? offset : 0
     },
 
+    hidden () {
+      return this.value !== true || (this.fixed === true && this.revealed !== true)
+    },
+
+    revealOnFocus () {
+      return this.value === true && this.hidden === true && this.reveal === true
+    },
+
     classes () {
-      return (
-        this.fixed === true ? 'fixed' : 'absolute') + '-top' +
+      return (this.fixed === true ? 'fixed' : 'absolute') + '-top' +
         (this.bordered === true ? ' q-header--bordered' : '') +
-        (
-          this.value !== true || (this.fixed === true && this.revealed !== true)
-            ? ' q-header--hidden'
-            : ''
-        )
+        (this.hidden === true ? ' q-header--hidden' : '') +
+        (this.value !== true ? ' q-layout--prevent-focus' : '')
     },
 
     style () {
@@ -135,6 +139,7 @@ export default Vue.extend({
       class: this.classes,
       style: this.style,
       on: {
+        focusin: this.__onFocusin,
         ...this.$listeners,
         input: stop
       }
@@ -173,6 +178,12 @@ export default Vue.extend({
       if (this[prop] !== val) {
         this[prop] = val
       }
+    },
+
+    __onFocusin () {
+      if (this.revealOnFocus === true) {
+        this.__updateLocal('revealed', true)
+      }
     }
   }
 })

ui/src/components/layout/QLayout.sass

@@ -155,6 +155,10 @@ body.q-ios-padding
   .q-page-sticky
     transition: transform .12s, left .12s, right .12s, top .12s, bottom .12s !important
 
+body:not(.q-body--layout-animate)
+  .q-layout--prevent-focus
+    visibility: hidden
+
 .q-body--drawer-toggle
   overflow-x: hidden !important
 

ui/src/components/layout/QLayout.styl

@@ -155,6 +155,10 @@ body.q-ios-padding
   .q-page-sticky
     transition: transform .12s, left .12s, right .12s, top .12s, bottom .12s !important
 
+body:not(.q-body--layout-animate)
+  .q-layout--prevent-focus
+    visibility: hidden
+
 .q-body--drawer-toggle
   overflow-x: hidden !important