Keyboard navigation

src/components/VueBootstrapTypeahead.vue

@@ -16,6 +16,9 @@
         @focus="isFocused = true"
         @blur="handleBlur"
         @input="handleInput($event.target.value)"
+        @keyup.down="$emit('keyup.down', $event.target.value)"
+        @keyup.up="$emit('keyup.up', $event.target.value)"
+        @keyup.enter="$emit('keyup.enter', $event.target.value)"
         autocomplete="off"
       />
       <div v-if="$slots.append || append" class="input-group-append">

src/components/VueBootstrapTypeaheadList.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="list-group shadow">
+  <div class="list-group shadow" ref="suggestionList">
     <vue-bootstrap-typeahead-list-item
       v-for="(item, id) in matchedItems" :key="id"
+      :active="isListItemActive(id)"
       :data="item.data"
       :html-text="highlight(item.text)"
       :background-variant="backgroundVariant"
@@ -59,9 +60,22 @@ export default {
     }
   },
 
+  created() {
+    this.$parent.$on('input', this.resetActiveListItem)
+    this.$parent.$on('keyup.down', this.selectNextListItem)
+    this.$parent.$on('keyup.up', this.selectPreviousListItem)
+    this.$parent.$on('keyup.enter', this.hitActiveListItem)
+  },
+
+  data() {
+    return {
+      activeListItem: -1
+    }
+  },
+
   computed: {
     highlight() {
-      return (text) => {
+      return text => {
         text = sanitize(text)
         if (this.query.length === 0) {
           return text
@@ -77,7 +91,10 @@ export default {
     },
 
     matchedItems() {
-      if (this.query.length === 0 || this.query.length < this.minMatchingChars) {
+      if (
+        this.query.length === 0 ||
+        this.query.length < this.minMatchingChars
+      ) {
         return []
       }
 
@@ -90,17 +107,71 @@ export default {
           const aIndex = a.text.indexOf(a.text.match(re)[0])
           const bIndex = b.text.indexOf(b.text.match(re)[0])
 
-          if (aIndex < bIndex) { return -1 }
-          if (aIndex > bIndex) { return 1 }
+          if (aIndex < bIndex) {
+            return -1
+          }
+          if (aIndex > bIndex) {
+            return 1
+          }
           return 0
-        }).slice(0, this.maxMatches)
+        })
+        .slice(0, this.maxMatches)
     }
   },
 
   methods: {
     handleHit(item, evt) {
       this.$emit('hit', item)
       evt.preventDefault()
+    },
+
+    hitActiveListItem() {
+      if (this.activeListItem >= 0) {
+        this.$emit('hit', this.matchedItems[this.activeListItem])
+      }
+    },
+
+    isListItemActive(id) {
+      return this.activeListItem === id
+    },
+
+    resetActiveListItem() {
+      this.activeListItem = -1
+    },
+
+    selectNextListItem() {
+      if (this.activeListItem < this.matchedItems.length - 1) {
+        this.activeListItem++
+      } else {
+        this.activeListItem = -1
+      }
+    },
+
+    selectPreviousListItem() {
+      if (this.activeListItem < 0) {
+        this.activeListItem = this.matchedItems.length - 1
+      } else {
+        this.activeListItem--
+      }
+    }
+  },
+
+  watch: {
+    activeListItem(newValue, oldValue) {
+      if (newValue >= 0) {
+        const scrollContainer = this.$refs.suggestionList
+        const listItem = scrollContainer.children[this.activeListItem]
+        const scrollContainerlHeight = scrollContainer.clientHeight
+        const listItemHeight = listItem.clientHeight
+        const visibleItems = Math.floor(
+          scrollContainerlHeight / listItemHeight
+        )
+        if (newValue >= visibleItems) {
+          scrollContainer.scrollTop = listItemHeight * this.activeListItem
+        } else {
+          scrollContainer.scrollTop = 0
+        }
+      }
     }
   }
 }

src/components/VueBootstrapTypeaheadListItem.vue

@@ -3,8 +3,6 @@
     tabindex="0"
     href="#"
     :class="textClasses"
-    @mouseover="active = true"
-    @mouseout="active = false"
   >
     <slot name="suggestion" v-bind="{ data: data, htmlText: htmlText }">
       <span v-html="htmlText"></span>
@@ -17,6 +15,9 @@ export default {
   name: 'VueBootstrapTypeaheadListItem',
 
   props: {
+    active: {
+      type: Boolean
+    },
     data: {},
     htmlText: {
       type: String
@@ -29,19 +30,13 @@ export default {
     }
   },
 
-  data() {
-    return {
-      active: false
-    }
-  },
-
   computed: {
     textClasses() {
-      let classes = ''
-      classes += this.active ? 'active' : ''
-      classes += this.backgroundVariant ? ` bg-${this.backgroundVariant}` : ''
-      classes += this.textVariant ? ` text-${this.textVariant}` : ''
-      return `vbst-item list-group-item list-group-item-action ${classes}`
+      const classes = ['vbst-item', 'list-group-item', 'list-group-item-action']
+      if (this.active) classes.push('active')
+      if (this.backgroundVariant) classes.push(`bg-${this.backgroundVariant}`)
+      if (this.textVariant) classes.push(`text-${this.textVariant}`)
+      return classes.join(' ')
     }
   }
 }

tests/unit/VueBootstrapTypeaheadList.spec.js

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import {mount} from '@vue/test-utils'
 import VueBootstrapTypeaheadList from '@/components/VueBootstrapTypeaheadList.vue'
 import VueBootstrapTypeaheadListItem from '@/components/VueBootstrapTypeaheadListItem.vue'
 
@@ -80,4 +80,69 @@ describe('VueBootstrapTypeaheadList', () => {
     })
     expect(wrapper.find(VueBootstrapTypeaheadListItem).vm.htmlText).toBe('<strong>Canada</strong>')
   })
+  it('Resets the active list item', () => {
+    wrapper.setProps({
+      query: 'Can'
+    })
+    wrapper.vm.$parent.$emit('keyup.down')
+    wrapper.vm.resetActiveListItem()
+    expect(wrapper.vm.activeListItem).toBe(-1)
+  })
+
+  it('Selects next list item on keyup.down', () => {
+    wrapper.setProps({
+      query: 'Can'
+    })
+    wrapper.vm.$parent.$emit('keyup.down')
+    expect(wrapper.vm.activeListItem).toBe(0)
+  })
+
+  it('Wraps back to input on keyup.down at bottom of list', () => {
+    wrapper.setProps({
+      query: 'Canada'
+    })
+    wrapper.vm.$parent.$emit('keyup.down')
+    wrapper.vm.$parent.$emit('keyup.down')
+    expect(wrapper.vm.activeListItem).toBe(-1)
+  })
+
+  it('Selects previous list item on keyup.up', () => {
+    wrapper.setProps({
+      query: 'Can'
+    })
+    wrapper.vm.$parent.$emit('keyup.up')
+    expect(wrapper.vm.activeListItem).toBe(wrapper.vm.matchedItems.length - 1)
+  })
+
+  it('Selects input on keyup.up at when at top of the list', () => {
+    wrapper.setProps({
+      query: 'Can'
+    })
+    wrapper.vm.$parent.$emit('keyup.down')
+    wrapper.vm.$parent.$emit('keyup.up')
+    expect(wrapper.vm.activeListItem).toBe(-1)
+  })
+
+  it('Hits active item on keyup.enter', () => {
+    wrapper.setProps({
+      query: 'Can'
+    })
+    wrapper.vm.$parent.$emit('keyup.down') // advance active Item
+
+    wrapper.vm.$on('hit', (hitItem) => {
+      expect(hitItem).toBe(wrapper.vm.matchedItems[0])
+    })
+
+    wrapper.vm.$parent.$emit('keyup.enter')
+  })
+
+  it('Indicates list item is active or inactive', () => {
+    wrapper.setProps({
+      query: 'Can'
+    })
+    wrapper.vm.$parent.$emit('keyup.down')
+    expect(wrapper.vm.isListItemActive(0)).toBeTruthy()
+    expect(wrapper.vm.isListItemActive(1)).toBeFalsy()
+  })
 })
+

tests/unit/VueBootstrapTypeaheadListItem.spec.js

@@ -22,18 +22,9 @@ describe('VueBootstrapTypeaheadListItem.vue', () => {
     expect(wrapper.classes()).toEqual(expect.arrayContaining(['bg-light']))
   })
 
-  it('Applies the active class on mouseOver', () => {
-    expect(wrapper.vm.active).toBe(false)
-    wrapper.trigger('mouseover')
+  it('Renders active class properly', () => {
+    wrapper.setProps({active: true})
     expect(wrapper.vm.active).toBe(true)
     expect(wrapper.classes()).toEqual(expect.arrayContaining(['active']))
   })
-
-  it('Removes the active class on mouse out', () => {
-    wrapper.trigger('mouseover')
-    expect(wrapper.vm.active).toBe(true)
-    wrapper.trigger('mouseout')
-    expect(wrapper.vm.active).toBe(false)
-    expect(wrapper.classes()).toEqual(expect.not.arrayContaining(['active']))
-  })
 })