QAutocomplete: Fix focus after tab, fix loop in normalizeInterval, fix reposition, select options on keyboard navigation (quasarframework#2159)

close quasarframework#2149
close quasarframework#2155
close quasarframework#2157

Author: pdanpdan

src/components/autocomplete/QAutocomplete.js

@@ -99,8 +99,8 @@ export default {
         const popover = this.$refs.popover
         if (this.results.length) {
           this.__keyboardShow(-1)
-          if (popover.showing) {
-            popover.reposition()
+          if (popover && popover.showing) {
+            this.$nextTick(() => popover && popover.reposition())
           }
           else {
             popover.show()
@@ -146,8 +146,15 @@ export default {
       this.searchId = ''
     },
     __keyboardCustomKeyHandle (key) {
-      if (key === 27) { // ESCAPE
-        this.__clearSearch()
+      switch (key) {
+        case 27: // ESCAPE
+          this.__clearSearch()
+          break
+        case 38: // UP key
+        case 40: // DOWN key
+        case 9: // TAB key
+          this.__keyboardSetCurrentSelection(true)
+          break
       }
     },
     __keyboardShowTrigger () {
@@ -156,7 +163,7 @@ export default {
     __keyboardIsSelectableIndex (index) {
       return index > -1 && index < this.computedResults.length && !this.computedResults[index].disable
     },
-    setValue (result) {
+    setValue (result, noClose) {
       const value = this.staticData ? result[this.staticData.field] : result.value
       const suffix = this.__inputDebounce ? 'Debounce' : ''
 
@@ -168,11 +175,13 @@ export default {
       this[`__input${suffix}`].set(value)
 
       this.$emit('selected', result)
-      this.__clearSearch()
-      this.hide()
+      if (!noClose) {
+        this.__clearSearch()
+        this.hide()
+      }
     },
-    __keyboardSetSelection (index) {
-      this.setValue(this.results[index])
+    __keyboardSetSelection (index, navigation) {
+      this.setValue(this.results[index], navigation)
     },
     __delayTrigger () {
       this.__clearSearch()
@@ -219,7 +228,8 @@ export default {
       props: {
         fit: true,
         anchorClick: false,
-        noFocus: true
+        noFocus: true,
+        noRefocus: true
       },
       on: {
         show: () => {

src/mixins/keyboard-selection.js

@@ -13,9 +13,9 @@ export default {
         this.keyboardIndex = index
       }
     },
-    __keyboardSetCurrentSelection () {
+    __keyboardSetCurrentSelection (navigation) {
       if (this.keyboardIndex >= 0 && this.keyboardIndex <= this.keyboardMaxIndex) {
-        this.__keyboardSetSelection(this.keyboardIndex)
+        this.__keyboardSetSelection(this.keyboardIndex, navigation)
       }
     },
     __keyboardHandleKey (e) {
@@ -54,7 +54,7 @@ export default {
         do {
           index = normalizeToInterval(
             index + offset,
-            0,
+            -1,
             this.keyboardMaxIndex
           )
         }

src/utils/format.js

@@ -29,12 +29,12 @@ export function normalizeToInterval (v, min, max) {
 
   const size = (max - min + 1)
 
-  let index = v % size
+  let index = min + (v - min) % size
   if (index < min) {
     index = size + index
   }
 
-  return index
+  return index === 0 ? 0 : index // fix for (-a % a) => -0
 }
 
 export function pad (v, length = 2, char = '0') {