fix(QSelect): Keyboard navigation enhancements quasarframework#7382 (quasarframework#7386)

* guard keyboard search for index -1 (initial state when no option selected); 
* allow space in search if it's not first; 
* allow search for any printable char

Author: pdanpdan

ui/dev/src/pages/form/select-part-5-kbd.vue

@@ -360,6 +360,104 @@
         </q-select>
       </div>
     </div>
+
+    <div class="column q-gutter-y-md q-mt-lg">
+      <q-select
+        filled
+        v-model="modelK"
+        label="Single - strings - kbd search - option label/value str"
+        :options="optionsK"
+        option-value="value"
+        option-label="label"
+        clearable
+        :behavior="behavior"
+      />
+
+      <q-select
+        filled
+        v-model="modelK"
+        label="Single - strings - kbd search - option label/value str - map"
+        :options="optionsK"
+        option-value="value"
+        option-label="label"
+        emit-value
+        map-options
+        clearable
+        :behavior="behavior"
+      />
+
+      <q-select
+        filled
+        v-model="modelK"
+        label="Single - objs - kbd search - option label/value str - map"
+        :options="objOptionsK"
+        option-value="value"
+        option-label="label"
+        emit-value
+        map-options
+        clearable
+        :behavior="behavior"
+      />
+
+      <q-select
+        filled
+        v-model="modelKO"
+        label="Single - objs - kbd search - option label/value str"
+        :options="objOptionsK"
+        option-value="value"
+        option-label="label"
+        clearable
+        :behavior="behavior"
+      />
+
+      <q-select
+        filled
+        v-model="modelK"
+        label="Single - strings - kbd search - option label/value fn"
+        :options="optionsK"
+        :option-value="kOptionValue"
+        :option-label="kOptionLabel"
+        clearable
+        :behavior="behavior"
+      />
+
+      <q-select
+        filled
+        v-model="modelK"
+        label="Single - strings - kbd search - option label/value fn - map"
+        :options="optionsK"
+        :option-value="kOptionValue"
+        :option-label="kOptionLabel"
+        emit-value
+        map-options
+        clearable
+        :behavior="behavior"
+      />
+
+      <q-select
+        filled
+        v-model="modelK"
+        label="Single - objs - kbd search - option label/value fn - map"
+        :options="objOptionsK"
+        :option-value="kOptionValue"
+        :option-label="kOptionLabel"
+        emit-value
+        map-options
+        clearable
+        :behavior="behavior"
+      />
+
+      <q-select
+        filled
+        v-model="modelKO"
+        label="Single - objs - kbd search - option label/value fn"
+        :options="objOptionsK"
+        :option-value="kOptionValue"
+        :option-label="kOptionLabel"
+        clearable
+        :behavior="behavior"
+      />
+    </div>
   </div>
 </template>
 
@@ -371,16 +469,27 @@ const
     'Google 3', 'Facebook 3', 'Twitter 3', 'Apple 3', 'Oracle 3',
     'A very long text of an options that goes over the length limit when you open the debugger'
   ],
-  objOptions = options.map((label, value) => ({ label, value }))
+  objOptions = options.map((label, value) => ({ label, value })),
+
+  optionsK = [
+    'A A label', 'A B label', 'A C label',
+    'B A label', 'B B label', 'B C label',
+    'C A label', 'C B label', 'C C label'
+  ],
+  objOptionsK = optionsK.map((label, value) => ({ label, value }))
 
 export default {
   data () {
     return {
       modelS: null,
       modelM: null,
       modelO: [3, 4, 5],
+      modelK: null,
+      modelKO: null,
       options,
+      optionsK,
       objOptions,
+      objOptionsK,
       forceMenu: null
     }
   },
@@ -437,6 +546,18 @@ export default {
         const needle = val.toLowerCase()
         this.objOptions = objOptions.filter(v => v.label.toLowerCase().indexOf(needle) > -1)
       })
+    },
+
+    kOptionValue (item) {
+      item === void 0 && console.trace('kOptionValue', item)
+
+      return item === Object(item) ? item.value : item
+    },
+
+    kOptionLabel (item) {
+      item === void 0 && console.trace('kOptionLabel', item)
+
+      return item === Object(item) ? item.label : item
     }
   }
 }

ui/src/components/select/QSelect.js

@@ -655,29 +655,36 @@ export default Vue.extend({
 
       const optionsLength = this.virtualScrollLength
 
+      // clear search buffer if expired
+      if (this.searchBuffer === void 0 || this.searchBufferExp < Date.now()) {
+        this.searchBuffer = ''
+      }
+
       // keyboard search when not having use-input
-      if (optionsLength > 0 && this.useInput !== true && e.keyCode >= 48 && e.keyCode <= 90) {
+      if (
+        optionsLength > 0 &&
+        this.useInput !== true &&
+        e.key.length === 1 && // printable char
+        e.altKey === e.ctrlKey && // not kbd shortcut
+        (e.keyCode !== 32 || this.searchBuffer.length > 0) // space in middle of search
+      ) {
         this.menu !== true && this.showPopup(e)
 
-        // clear search buffer if expired
-        if (this.searchBuffer === void 0 || this.searchBufferExp < Date.now()) {
-          this.searchBuffer = ''
-        }
-
         const
           char = String.fromCharCode(e.keyCode).toLocaleLowerCase(),
           keyRepeat = this.searchBuffer.length === 1 && this.searchBuffer[0] === char
 
         this.searchBufferExp = Date.now() + 1500
         if (keyRepeat === false) {
+          stopAndPrevent(e)
           this.searchBuffer += char
         }
 
         const searchRe = new RegExp('^' + this.searchBuffer.split('').join('.*'), 'i')
 
         let index = this.optionIndex
 
-        if (keyRepeat === true || searchRe.test(this.getOptionLabel(this.options[index])) !== true) {
+        if (keyRepeat === true || index < 0 || searchRe.test(this.getOptionLabel(this.options[index])) !== true) {
           do {
             index = normalizeToInterval(index + 1, -1, optionsLength - 1)
           }
@@ -701,12 +708,12 @@ export default Vue.extend({
         return
       }
 
-      // enter, space (when not using use-input), or tab (when not using multiple and option selected)
+      // enter, space (when not using use-input and not in search), or tab (when not using multiple and option selected)
       // same target is checked above
       if (
         e.keyCode !== 13 &&
-        (this.useInput === true || e.keyCode !== 32) &&
-        (tabShouldSelect === false || e.keyCode !== 9)
+        (e.keyCode !== 32 || this.useInput === true || this.searchBuffer !== '') &&
+        (e.keyCode !== 9 || tabShouldSelect === false)
       ) { return }
 
       e.keyCode !== 9 && stopAndPrevent(e)