From 0b9161464a283e4302a985240ae6eb4105f547a1 Mon Sep 17 00:00:00 2001
From: Lisandro Mc Gough <lisandro.mcgough@blink.la>
Date: Tue, 19 Mar 2019 13:10:39 -0300
Subject: [PATCH 1/3] Allow item selection using arrow keys

---
 src/components/VueBootstrapTypeahead.vue      | 15 +++++++
 src/components/VueBootstrapTypeaheadList.vue  | 44 +++++++++++++++++++
 .../VueBootstrapTypeaheadListItem.vue         |  1 +
 3 files changed, 60 insertions(+)

diff --git a/src/components/VueBootstrapTypeahead.vue b/src/components/VueBootstrapTypeahead.vue
index e172442..56fbff6 100644
--- a/src/components/VueBootstrapTypeahead.vue
+++ b/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,19 @@ 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
+      }
     }
   },
 
diff --git a/src/components/VueBootstrapTypeaheadList.vue b/src/components/VueBootstrapTypeaheadList.vue
index f404987..15532ac 100644
--- a/src/components/VueBootstrapTypeaheadList.vue
+++ b/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,51 @@ 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) => {
+        item.active = (i === idx)
+      })
+    },
+
     handleHit(item, evt) {
       this.$emit('hit', item)
       evt.preventDefault()
diff --git a/src/components/VueBootstrapTypeaheadListItem.vue b/src/components/VueBootstrapTypeaheadListItem.vue
index 8bf49c3..2b2aaed 100644
--- a/src/components/VueBootstrapTypeaheadListItem.vue
+++ b/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>

From 4ce60a71a40db083694c7648fd0c0f1120412ef5 Mon Sep 17 00:00:00 2001
From: Lisandro Mc Gough <lisandro.mcgough@blink.la>
Date: Tue, 19 Mar 2019 13:15:27 -0300
Subject: [PATCH 2/3] Add example for item selection using arrow keys

---
 src/examples/ArrowKeys.vue | 66 ++++++++++++++++++++++++++++++++++++++
 src/router.js              |  4 +++
 src/views/Examples.vue     |  4 +++
 3 files changed, 74 insertions(+)
 create mode 100644 src/examples/ArrowKeys.vue

diff --git a/src/examples/ArrowKeys.vue b/src/examples/ArrowKeys.vue
new file mode 100644
index 0000000..0d70199
--- /dev/null
+++ b/src/examples/ArrowKeys.vue
@@ -0,0 +1,66 @@
+<template>
+  <div id="wrapper">
+    <h1>Arrow Keys Example</h1>
+    <div>
+      <p class="lead">
+        Selected Country: <strong>{{query}}</strong>
+      </p>
+      <vue-bootstrap-typeahead
+        v-model="query"
+        :data="countries"
+        placeholder="Enter a country"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import VueBootstrapTypeahead from '@/components/VueBootstrapTypeahead';
+
+  export default {
+    components: {
+      VueBootstrapTypeahead
+    },
+    data() {
+      return {
+        query: '',
+        countries: [
+          'Argentina',
+          'Armenia',
+          'Bahamas',
+          'Bahrain',
+          'Bangladesh',
+          'Barbados',
+          'Belarus',
+          'Belize',
+          'Benin',
+          'Cambodia',
+          'Cameroon',
+          'Canada',
+          'Ukraine',
+          'United Arab Emirates',
+          'United Kingdom',
+          'United States',
+          'Mauritius',
+          'Mauritania',
+          'Mexico',
+          'Monaco',
+          'Mongolia',
+          'Montenegro'
+        ]
+      }
+    },
+    methods: {
+    },
+    watch: {
+    },
+    filters: {
+      stringify(value) {
+        return JSON.stringify(value, null, 2)
+      }
+    },
+  }
+</script>
+
+<style>
+</style>
diff --git a/src/router.js b/src/router.js
index 9ab5388..5d27caf 100644
--- a/src/router.js
+++ b/src/router.js
@@ -29,6 +29,10 @@ export default new Router({
           path: 'basic-example',
           component: () => import(/* webpackChunkName: "examples" */ './examples/BasicExample.vue')
         },
+        {
+          path: 'arrow-keys',
+          component: () => import(/* webpackChunkName: "examples" */ './examples/ArrowKeys.vue')
+        },
         {
           path: 'working-with-apis',
           component: () => import(/* webpackChunkName: "examples" */ './examples/WorkingWithAPIs.vue')
diff --git a/src/views/Examples.vue b/src/views/Examples.vue
index 220f807..09d1aba 100644
--- a/src/views/Examples.vue
+++ b/src/views/Examples.vue
@@ -28,6 +28,10 @@ export default {
           name: 'Basic Example',
           link: '/examples/basic-example'
         },
+        {
+          name: 'Arrow Keys Selection',
+          link: '/examples/arrow-keys'
+        },
         {
           name: 'Working With API\'s',
           link: '/examples/working-with-apis'

From c06205e102909b530f0b3f45f27abf9d6b4e536f Mon Sep 17 00:00:00 2001
From: Lisandro Mc Gough <lisandro.mcgough@blink.la>
Date: Tue, 19 Mar 2019 13:30:08 -0300
Subject: [PATCH 3/3] Keep active item visible when list is scrollable

---
 src/components/VueBootstrapTypeaheadList.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/VueBootstrapTypeaheadList.vue b/src/components/VueBootstrapTypeaheadList.vue
index 15532ac..ca62e4d 100644
--- a/src/components/VueBootstrapTypeaheadList.vue
+++ b/src/components/VueBootstrapTypeaheadList.vue
@@ -138,7 +138,13 @@ export default {
 
     setActiveItem(idx) {
       this.$children.forEach((item, i) => {
-        item.active = (i === idx)
+        if (i === idx) {
+          item.active = true
+          item.$el.scrollIntoView(false)
+        }
+        else {
+          item.active = false
+        }
       })
     },