QAutocomplete and QSelect - start with keyboard cursor at -1 (fixes disabled first element in list) (quasarframework#1585)

Author: pdanpdan

src/components/autocomplete/QAutocomplete.js

@@ -98,7 +98,7 @@ export default {
         this.results = this.filter(terms, this.staticData)
         const popover = this.$refs.popover
         if (this.results.length) {
-          this.__keyboardShow(this.$q.platform.is.desktop ? 0 : -1)
+          this.__keyboardShow(-1)
           if (popover.showing) {
             popover.reposition()
           }
@@ -122,7 +122,7 @@ export default {
 
         if (Array.isArray(results) && results.length > 0) {
           this.results = results
-          this.__keyboardShow(this.$q.platform.is.desktop ? 0 : -1)
+          this.__keyboardShow(-1)
           this.$refs.popover.show()
           return
         }
@@ -153,6 +153,9 @@ export default {
     __keyboardShowTrigger () {
       this.trigger()
     },
+    __keyboardIsSelectableIndex (index) {
+      return index > -1 && index < this.computedResults.length && !this.computedResults[index].disable
+    },
     setValue (result) {
       const value = this.staticData ? result[this.staticData.field] : result.value
       const suffix = this.__inputDebounce ? 'Debounce' : ''
@@ -232,7 +235,8 @@ export default {
         key: result.id || JSON.stringify(result),
         'class': {
           active: this.keyboardIndex === index,
-          'cursor-pointer': !result.disable
+          'cursor-pointer': !result.disable,
+          'text-faded': result.disable
         },
         props: { cfg: result },
         nativeOn: {

src/components/select/QSelect.vue

@@ -330,10 +330,16 @@ export default {
     },
 
     __keyboardCalcIndex () {
-      this.keyboardMoveDirection = true
       this.keyboardIndex = -1
       const sel = this.multiple ? this.selectedOptions.map(o => o.value) : [this.model]
-      this.$nextTick(() => this.__keyboardShow(sel === void 0 ? 0 : Math.max(0, this.visibleOptions.findIndex(opt => sel.includes(opt.value)))))
+      this.$nextTick(() => {
+        const index = sel === void 0 ? -1 : Math.max(-1, this.visibleOptions.findIndex(opt => sel.includes(opt.value)))
+        if (index > -1) {
+          this.keyboardMoveDirection = true
+          setTimeout(() => { this.keyboardMoveDirection = false }, 500)
+          this.__keyboardShow(index)
+        }
+      })
     },
     __keyboardCustomKeyHandle (key, e) {
       switch (key) {