select using arrow keys

alexurquhart#44

Author: Milan Poliak

src/components/VueBootstrapTypeahead.vue

@@ -16,6 +16,7 @@
         @focus="isFocused = true"
         @blur="handleBlur"
         @input="handleInput($event.target.value)"
+        @keydown="handleKeyDown"
         autocomplete="off"
       />
       <div v-if="$slots.append || append" class="input-group-append">
@@ -35,6 +36,7 @@
       :maxMatches="maxMatches"
       :minMatchingChars="minMatchingChars"
       @hit="handleHit"
+      @keydown="handleKeyDown"
     >
       <!-- pass down all scoped slots -->
       <template v-for="(slot, slotName) in $scopedSlots" :slot="slotName" slot-scope="{ data, htmlText }">
@@ -158,6 +160,18 @@ export default {
       if (typeof this.value !== 'undefined') {
         this.$emit('input', newValue)
       }
+    },
+
+    handleKeyDown(evt) {
+      if (! this.isFocused || this.data.length < 1) return
+      switch (evt.code) {
+        case 'ArrowUp':
+        case 'ArrowDown':
+        case 'Enter':
+          evt.preventDefault()
+          this.$emit('selectionKeyPressed', evt)
+          break
+      }
     }
   },
 

src/components/VueBootstrapTypeaheadList.vue

@@ -7,6 +7,7 @@
       :background-variant="backgroundVariant"
       :text-variant="textVariant"
       @click.native="handleHit(item, $event)"
+      @keydown="$listeners.keydown"
     >
       <template v-if="$scopedSlots.suggestion" slot="suggestion" slot-scope="{ data, htmlText }">
         <slot name="suggestion" v-bind="{ data, htmlText }" />
@@ -96,8 +97,53 @@ export default {
         }).slice(0, this.maxMatches)
     }
   },
+  mounted() {
+    this.$parent.$on('selectionKeyPressed', this.handleSelectionKey.bind(this))
+  },
 
   methods: {
+    handleSelectionKey(evt) {
+      if (this.data.length < 1) return
+      let active = this.findActiveItemIndex()
+      let ch = this.$children
+      switch (evt.code) {
+        case 'ArrowUp':
+          this.setActiveItem((active > 0) ? (active - 1) : (ch.length - 1))
+          break
+        case 'ArrowDown':
+          this.setActiveItem((active + 1) % ch.length)
+          break
+        case 'Enter':
+          this.$emit('hit', this.findActiveItem())
+          break
+      }
+    },
+    findActiveItem() {
+      let idx = this.findActiveItemIndex()
+      return (idx < 0) ? null : this.matchedItems[idx]
+    },
+    findActiveItemIndex() {
+      let ch = this.$children
+      for (let i = 0; i < ch.length; i++) {
+        let item = ch[i]
+        if (item.active) {
+          return i
+        }
+      }
+      return -1
+    },
+    setActiveItem(idx) {
+      this.$children.forEach((item, i) => {
+        if (i === idx) {
+          item.active = true
+          item.$el.scrollIntoView(false)
+        }
+        else {
+          item.active = false
+        }
+      })
+    },
+
     handleHit(item, evt) {
       this.$emit('hit', item)
       evt.preventDefault()

src/components/VueBootstrapTypeaheadListItem.vue

@@ -5,6 +5,7 @@
     :class="textClasses"
     @mouseover="active = true"
     @mouseout="active = false"
+    @keydown="$listeners.keydown"
   >
     <slot name="suggestion" v-bind="{ data: data, htmlText: htmlText }">
       <span v-html="htmlText"></span>