Improve keyboard navigation

- QModal - fix not emmiting dismiss on ESC - focus after show - QPopover - focus after show - refocus after hide (noRefocus prop) - allow toggle by keyboard ENTER - QDialog - fix button focus - find button by class name (q-btn) - QColor and QDatetime - fix tabindex lost on close - fix popup not closing on blur - QColorPicker - fix incorrect tabindex on disable - QDatetimePicker.mat - allow keyboard adjustment of all values - QActionsheet - select option with ENTER/SPACE, navigation with TAB - QAutocomplete - use QPopup with noFocus - QKnob, QSlider, QRange - keyboard updating (UP|RIGHT +, DOWN|LEFT -, CTRL+... 10*) - QSelect - remove autofocusFilter - always select filter if present - move keyboard navigation on QPopover - delay popover.reposition on filter to allow resize - v-back-to-top, v-close-overlay, v-go-back, v-ripple - trigger by keyboard ENTER
quasarframework · May 2, 2018 · fd369f6 · fd369f6
1 parent 68548b7
commit fd369f6
Show file tree

Hide file tree

Showing 24 changed files with 305 additions and 83 deletions.
diff --git a/dev/components/components/popover.vue b/dev/components/components/popover.vue
@@ -17,6 +17,8 @@
                 :key="n"
                 v-close-overlay
                 @click.native="showNotify()"
+                @keyup.native.13.32="showNotify()"
+                :tabindex="0"
               >
                 <q-item-main label="Label" sublabel="Click me" />
               </q-item>
@@ -32,6 +34,8 @@
                 :key="n"
                 v-close-overlay
                 @click.native="showNotify()"
+                @keyup.native.13.32="showNotify()"
+                :tabindex="0"
               >
                 <q-item-main label="X Label" sublabel="X Click me" />
               </q-item>
@@ -57,7 +61,9 @@
                     v-for="n in 3"
                     :key="n"
                     v-close-overlay
-                    @click="showNotify()"
+                    @click.native="showNotify()"
+                    @keyup.native.13.32="showNotify()"
+                    :tabindex="0"
                   >
                     <q-item-main label="Label" />
                   </q-item>
@@ -118,6 +124,8 @@
               src="~assets/map.png"
               style="height: 150px; width: 200px;"
               @click="showNotify(), $refs.popover3.hide()"
+              @keyup.13.32="showNotify(), $refs.popover3.hide()"
+              :tabindex="0"
             >
           </q-popover>
         </q-btn>
@@ -140,6 +148,8 @@
               v-for="n in 20"
               :key="n"
               @click.native="showNotify(), $refs.popover5.hide()"
+              @keyup.native.13.32="showNotify(), $refs.popover5.hide()"
+              :tabindex="0"
             >
               <q-item-main label="Label" sublabel="Click me" />
             </q-item>

diff --git a/dev/components/form/select.vue b/dev/components/form/select.vue
@@ -58,9 +58,9 @@
       <q-select simple v-model="select" :options="selectOptions"></q-select>
 
       <p class="caption">With Filter</p>
-      <q-select filter autofocus-filter v-model="select" :options="selectListOptions"></q-select>
-      <q-select filter autofocus-filter v-model="select" :options="selectLongListOptions"></q-select>
-      <q-select filter autofocus-filter inverted v-model="select" :options="selectListOptions"></q-select>
+      <q-select filter v-model="select" :options="selectListOptions"></q-select>
+      <q-select filter v-model="select" :options="selectLongListOptions"></q-select>
+      <q-select filter inverted v-model="select" :options="selectListOptions"></q-select>
       <q-select filter inverted v-model="select" :options="selectLongListOptions"></q-select>
       <q-select filter multiple checkbox v-model="multipleSelect" :options="selectListOptions"></q-select>
 

diff --git a/src/components/autocomplete/QAutocomplete.js b/src/components/autocomplete/QAutocomplete.js
@@ -216,7 +216,8 @@ export default {
       'class': dark ? 'bg-dark' : null,
       props: {
         fit: true,
-        anchorClick: false
+        anchorClick: false,
+        noFocus: true
       },
       on: {
         show: () => {

diff --git a/src/components/color/QColor.js b/src/components/color/QColor.js
@@ -116,24 +116,35 @@ export default {
       this.$emit('focus')
     },
     __onBlur (e) {
-      if (this.$refs.popup && this.$refs.popup.showing) {
+      if (!this.focused) {
         return
       }
 
-      this.__onHide()
       setTimeout(() => {
         const el = document.activeElement
-        if (el !== document.body && !this.$refs.popup.$el.contains(el)) {
+        if (
+          !this.$refs.popup ||
+          !this.$refs.popup.showing ||
+          (el !== document.body && !this.$refs.popup.$el.contains(el))
+        ) {
+          this.__onHide()
           this.hide()
         }
       }, 1)
     },
-    __onHide (forceUpdate) {
-      this.focused && this.$emit('blur')
-      this.focused = false
+    __onHide (forceUpdate, keepFocus) {
       if (forceUpdate || this.isPopover) {
         this.__update(forceUpdate)
       }
+      if (!this.focused) {
+        return
+      }
+      if (keepFocus) {
+        this.$el.focus()
+        return
+      }
+      this.$emit('blur')
+      this.focused = false
     },
     __setModel (val, forceUpdate) {
       this.model = clone(val)
@@ -188,7 +199,7 @@ export default {
             },
             on: {
               click: () => {
-                this.__onHide()
+                this.__onHide(false, true)
                 this.hide()
               }
             }
@@ -203,7 +214,7 @@ export default {
               },
               on: {
                 click: () => {
-                  this.__onHide(true)
+                  this.__onHide(true, true)
                   this.hide()
                 }
               }
@@ -264,7 +275,7 @@ export default {
           },
           on: {
             show: this.__onFocus,
-            hide: val => this.__onHide(true)
+            hide: val => this.__onHide(true, true)
           }
         }, this.__getPicker(h))
         : h(QModal, {
@@ -277,7 +288,7 @@ export default {
             transition: this.transition
           },
           on: {
-            dismiss: this.__onHide
+            dismiss: () => this.__onHide(false, true)
           }
         }, this.__getPicker(h, true)),
 

diff --git a/src/components/color/QColorPicker.js b/src/components/color/QColorPicker.js
@@ -207,7 +207,7 @@ export default {
               min: 0,
               max,
               readonly: !this.editable,
-              tabindex: this.disable ? 0 : -1
+              tabindex: this.editable ? 0 : -1
             },
             staticClass: 'full-width text-center q-no-input-spinner',
             domProps: {
@@ -232,10 +232,10 @@ export default {
               domProps: { value: this.model.hex },
               attrs: {
                 readonly: !this.editable,
-                tabindex: this.disable ? 0 : -1
+                tabindex: this.editable ? 0 : -1
               },
               on: {
-                input: this.__onHexChange,
+                change: this.__onHexChange,
                 blur: evt => this.editable && this.__onHexChange(evt, true)
               },
               staticClass: 'full-width text-center uppercase'

diff --git a/src/components/datetime/QDatetime.js b/src/components/datetime/QDatetime.js
@@ -129,24 +129,35 @@ export default {
       this.$emit('focus')
     },
     __onBlur (e) {
-      if (this.$refs.popup && this.$refs.popup.showing) {
+      if (!this.focused) {
         return
       }
 
-      this.__onHide()
       setTimeout(() => {
         const el = document.activeElement
-        if (el !== document.body && !this.$refs.popup.$el.contains(el)) {
+        if (
+          !this.$refs.popup ||
+          !this.$refs.popup.showing ||
+          (el !== document.body && !this.$refs.popup.$el.contains(el))
+        ) {
+          this.__onHide()
           this.hide()
         }
       }, 1)
     },
-    __onHide (forceUpdate) {
-      this.focused && this.$emit('blur')
-      this.focused = false
+    __onHide (forceUpdate, keepFocus) {
       if (forceUpdate || this.isPopover) {
         this.__update(forceUpdate)
       }
+      if (!this.focused) {
+        return
+      }
+      if (keepFocus) {
+        this.$el.focus()
+        return
+      }
+      this.$emit('blur')
+      this.focused = false
     },
     __setModel (val, forceUpdate) {
       this.model = clone(val)
@@ -220,7 +231,7 @@ export default {
                 },
                 on: {
                   click: () => {
-                    this.__onHide()
+                    this.__onHide(false, true)
                     this.hide()
                     this.__resetView()
                   }
@@ -237,7 +248,7 @@ export default {
                   },
                   on: {
                     click: () => {
-                      this.__onHide(true)
+                      this.__onHide(true, true)
                       this.hide()
                       this.__resetView()
                     }
@@ -299,7 +310,7 @@ export default {
           },
           on: {
             show: this.__onFocus,
-            hide: val => this.__onHide(true)
+            hide: () => this.__onHide(true, true)
           }
         }, this.__getPicker(h))
         : h(QModal, {
@@ -312,7 +323,7 @@ export default {
             transition: this.transition
           },
           on: {
-            dismiss: this.__onHide
+            dismiss: () => this.__onHide(false, true)
           }
         }, this.__getPicker(h, true)),