From ce49f42eb908f5100667627041915c62aea179f6 Mon Sep 17 00:00:00 2001
From: Antoine Matyja <antoinematyja@free.fr>
Date: Sat, 1 Sep 2018 20:27:27 +0200
Subject: [PATCH 1/6] Add keyboard navigation

---
 src/components/VueBootstrapTypeahead.vue      |  3 ++
 src/components/VueBootstrapTypeaheadList.vue  | 39 +++++++++++++++++++
 .../VueBootstrapTypeaheadListItem.vue         | 21 ++++------
 src/views/Home.vue                            |  1 -
 4 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/src/components/VueBootstrapTypeahead.vue b/src/components/VueBootstrapTypeahead.vue
index 8bf1c85..2b64f67 100644
--- a/src/components/VueBootstrapTypeahead.vue
+++ b/src/components/VueBootstrapTypeahead.vue
@@ -16,6 +16,9 @@
         @focus="isFocused = true"
         @blur="handleBlur"
         @input="$emit('input', $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">
diff --git a/src/components/VueBootstrapTypeaheadList.vue b/src/components/VueBootstrapTypeaheadList.vue
index 8b72d28..05f76a8 100644
--- a/src/components/VueBootstrapTypeaheadList.vue
+++ b/src/components/VueBootstrapTypeaheadList.vue
@@ -5,6 +5,7 @@
       v-html="highlight(item.text)"
       :background-variant="backgroundVariant"
       :text-variant="textVariant"
+      :active="isListItemActive(id)"
       @click.native="handleHit(item, $event)"
     />
   </div>
@@ -54,6 +55,12 @@ export default {
     }
   },
 
+  data() {
+    return {
+      activeListItem: -1
+    }
+  },
+
   computed: {
     highlight() {
       return (text) => {
@@ -96,7 +103,39 @@ export default {
     handleHit(item, evt) {
       this.$emit('hit', item)
       evt.preventDefault()
+    },
+    isListItemActive(id) {
+      return this.activeListItem === id
+    },
+    resetActiveListItem() {
+      this.activeListItem = -1
+    },
+    selectNextListItem() {
+      if (this.activeListItem < this.matchedItems.length - 1) {
+        this.activeListItem++
+      } else {
+        this.resetActiveListItem()
+      }
+    },
+    selectPreviousListItem() {
+      if (this.activeListItem < 0) {
+        this.activeListItem = this.matchedItems.length - 1
+      } else {
+        this.activeListItem--
+      }
+    },
+    hitActiveListItem() {
+      if (this.activeListItem >= 0) {
+        this.$emit('hit', this.matchedItems[this.activeListItem])
+      }
     }
+  },
+
+  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)
   }
 }
 </script>
diff --git a/src/components/VueBootstrapTypeaheadListItem.vue b/src/components/VueBootstrapTypeaheadListItem.vue
index 74c8ad3..f3ae546 100644
--- a/src/components/VueBootstrapTypeaheadListItem.vue
+++ b/src/components/VueBootstrapTypeaheadListItem.vue
@@ -2,8 +2,6 @@
   <a
     href="#"
     :class="textClasses"
-    @mouseover="active = true"
-    @mouseout="active = false"
   >
     <slot></slot>
   </a>
@@ -14,6 +12,9 @@ export default {
   name: 'VueBootstrapTypeaheadListItem',
 
   props: {
+    active: {
+      type: Boolean
+    },
     backgroundVariant: {
       type: String
     },
@@ -22,19 +23,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(' ')
     }
   }
 }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 564edd9..58656a7 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -17,7 +17,6 @@
           <vue-bootstrap-typeahead
             :data="countries"
             v-model="cntrySearch"
-            background-variant="light"
             :serializer="s => s.name"
             placeholder="Canada, United States, etc..."
             @hit="selectedCountry = $event"

From 90d83b7557b3de2e0f8e1c0efed1e36fe44a48d7 Mon Sep 17 00:00:00 2001
From: Antoine Matyja <antoinematyja@free.fr>
Date: Fri, 7 Sep 2018 23:40:56 +0200
Subject: [PATCH 2/6] Remove tests related to list item active class on mouse
 over

---
 tests/unit/VueBootstrapTypeaheadListItem.spec.js | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/tests/unit/VueBootstrapTypeaheadListItem.spec.js b/tests/unit/VueBootstrapTypeaheadListItem.spec.js
index 5450164..26236e9 100644
--- a/tests/unit/VueBootstrapTypeaheadListItem.spec.js
+++ b/tests/unit/VueBootstrapTypeaheadListItem.spec.js
@@ -21,19 +21,4 @@ describe('VueBootstrapTypeaheadListItem.vue', () => {
     wrapper.setProps({backgroundVariant: 'light'})
     expect(wrapper.classes()).toEqual(expect.arrayContaining(['bg-light']))
   })
-
-  it('Applies the active class on mouseOver', () => {
-    expect(wrapper.vm.active).toBe(false)
-    wrapper.trigger('mouseover')
-    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']))
-  })
 })

From 46027c2b219d444ccc401d41c695d8030cdcfec7 Mon Sep 17 00:00:00 2001
From: Antoine Matyja <antoinematyja@free.fr>
Date: Fri, 7 Sep 2018 23:44:17 +0200
Subject: [PATCH 3/6] Add list item active prop/css class test

---
 tests/unit/VueBootstrapTypeaheadListItem.spec.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/tests/unit/VueBootstrapTypeaheadListItem.spec.js b/tests/unit/VueBootstrapTypeaheadListItem.spec.js
index 26236e9..8000915 100644
--- a/tests/unit/VueBootstrapTypeaheadListItem.spec.js
+++ b/tests/unit/VueBootstrapTypeaheadListItem.spec.js
@@ -21,4 +21,10 @@ describe('VueBootstrapTypeaheadListItem.vue', () => {
     wrapper.setProps({backgroundVariant: 'light'})
     expect(wrapper.classes()).toEqual(expect.arrayContaining(['bg-light']))
   })
+
+  it('Renders active class properly', () => {
+    wrapper.setProps({active: true})
+    expect(wrapper.vm.active).toBe(true)
+    expect(wrapper.classes()).toEqual(expect.arrayContaining(['active']))
+  })
 })

From 303f51d0fb220b4ec91d23046e1f445f643cd184 Mon Sep 17 00:00:00 2001
From: Raymond Muller <raymond.muller.1989@gmail.com>
Date: Sun, 7 Oct 2018 18:52:32 +0200
Subject: [PATCH 4/6] feat: keyboard navigation

fix: lint issues

fix: formatting

fix: ref
---
 src/components/VueBootstrapTypeaheadList.vue  | 118 +++++++++++-------
 .../VueBootstrapTypeaheadListItem.vue         |   6 +-
 2 files changed, 78 insertions(+), 46 deletions(-)

diff --git a/src/components/VueBootstrapTypeaheadList.vue b/src/components/VueBootstrapTypeaheadList.vue
index 19f2471..8191653 100644
--- a/src/components/VueBootstrapTypeaheadList.vue
+++ b/src/components/VueBootstrapTypeaheadList.vue
@@ -1,12 +1,12 @@
 <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"
       :text-variant="textVariant"
-      :active="isListItemActive(id)"
       @click.native="handleHit(item, $event)"
     >
       <template v-if="$scopedSlots.suggestion" slot="suggestion" slot-scope="{ data, htmlText }">
@@ -20,15 +20,15 @@
 import VueBootstrapTypeaheadListItem from './VueBootstrapTypeaheadListItem.vue'
 
 function sanitize(text) {
-  return text.replace(/</g, '&lt;').replace(/>/g, '&gt;')
+  return text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 
 function escapeRegExp(str) {
-  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
 export default {
-  name: 'VueBootstrapTypeaheadList',
+  name: "VueBootstrapTypeaheadList",
 
   components: {
     VueBootstrapTypeaheadListItem
@@ -42,7 +42,7 @@ export default {
     },
     query: {
       type: String,
-      default: ''
+      default: ""
     },
     backgroundVariant: {
       type: String
@@ -60,87 +60,119 @@ 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) => {
-        text = sanitize(text)
+      return text => {
+        text = sanitize(text);
         if (this.query.length === 0) {
-          return text
+          return text;
         }
-        const re = new RegExp(this.escapedQuery, 'gi')
+        const re = new RegExp(this.escapedQuery, "gi");
 
-        return text.replace(re, `<strong>$&</strong>`)
-      }
+        return text.replace(re, `<strong>$&</strong>`);
+      };
     },
 
     escapedQuery() {
-      return escapeRegExp(sanitize(this.query))
+      return escapeRegExp(sanitize(this.query));
     },
 
     matchedItems() {
-      if (this.query.length === 0 || this.query.length < this.minMatchingChars) {
-        return []
+      if (
+        this.query.length === 0 ||
+        this.query.length < this.minMatchingChars
+      ) {
+        return [];
       }
 
-      const re = new RegExp(this.escapedQuery, 'gi')
+      const re = new RegExp(this.escapedQuery, "gi");
 
       // Filter, sort, and concat
       return this.data
         .filter(i => i.text.match(re) !== null)
         .sort((a, b) => {
-          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 }
-          return 0
-        }).slice(0, this.maxMatches)
+          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;
+          }
+          return 0;
+        })
+        .slice(0, this.maxMatches);
     }
   },
 
   methods: {
     handleHit(item, evt) {
-      this.$emit('hit', item)
-      evt.preventDefault()
+      this.$emit("hit", item);
+      evt.preventDefault();
+    },
+
+    hitActiveListItem() {
+      if (this.activeListItem >= 0) {
+        this.$emit("hit", this.matchedItems[this.activeListItem]);
+      }
     },
+
     isListItemActive(id) {
-      return this.activeListItem === id
+      return this.activeListItem === id;
     },
+
     resetActiveListItem() {
-      this.activeListItem = -1
+      this.activeListItem = -1;
     },
+
     selectNextListItem() {
       if (this.activeListItem < this.matchedItems.length - 1) {
-        this.activeListItem++
+        this.activeListItem++;
       } else {
-        this.resetActiveListItem()
+        this.activeListItem = -1;
       }
     },
+
     selectPreviousListItem() {
       if (this.activeListItem < 0) {
-        this.activeListItem = this.matchedItems.length - 1
+        this.activeListItem = this.matchedItems.length - 1;
       } else {
-        this.activeListItem--
-      }
-    },
-    hitActiveListItem() {
-      if (this.activeListItem >= 0) {
-        this.$emit('hit', this.matchedItems[this.activeListItem])
+        this.activeListItem--;
       }
     }
   },
 
-  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)
+  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;
+        }
+      }
+    }
   }
-}
+};
 </script>
diff --git a/src/components/VueBootstrapTypeaheadListItem.vue b/src/components/VueBootstrapTypeaheadListItem.vue
index 5f0b523..9604481 100644
--- a/src/components/VueBootstrapTypeaheadListItem.vue
+++ b/src/components/VueBootstrapTypeaheadListItem.vue
@@ -15,13 +15,13 @@ export default {
   name: 'VueBootstrapTypeaheadListItem',
 
   props: {
+    active: {
+      type: Boolean
+    },
     data: {},
     htmlText: {
       type: String
     },
-    active: {
-      type: Boolean
-    },
     backgroundVariant: {
       type: String
     },

From 3785843ecd93666f46153c0535d8e72ac9ba3f48 Mon Sep 17 00:00:00 2001
From: Raymond Muller <raymond.muller.1989@gmail.com>
Date: Sun, 7 Oct 2018 19:56:02 +0200
Subject: [PATCH 5/6] fix: eslint

---
 src/components/VueBootstrapTypeaheadList.vue | 80 ++++++++++----------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/components/VueBootstrapTypeaheadList.vue b/src/components/VueBootstrapTypeaheadList.vue
index 8191653..829cbce 100644
--- a/src/components/VueBootstrapTypeaheadList.vue
+++ b/src/components/VueBootstrapTypeaheadList.vue
@@ -20,15 +20,15 @@
 import VueBootstrapTypeaheadListItem from './VueBootstrapTypeaheadListItem.vue'
 
 function sanitize(text) {
-  return text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return text.replace(/</g, '&lt;').replace(/>/g, '&gt;')
 }
 
 function escapeRegExp(str) {
-  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
 }
 
 export default {
-  name: "VueBootstrapTypeaheadList",
+  name: 'VueBootstrapTypeaheadList',
 
   components: {
     VueBootstrapTypeaheadListItem
@@ -42,7 +42,7 @@ export default {
     },
     query: {
       type: String,
-      default: ""
+      default: ''
     },
     backgroundVariant: {
       type: String
@@ -61,33 +61,33 @@ 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);
+    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 => {
-        text = sanitize(text);
+        text = sanitize(text)
         if (this.query.length === 0) {
-          return text;
+          return text
         }
-        const re = new RegExp(this.escapedQuery, "gi");
+        const re = new RegExp(this.escapedQuery, 'gi')
 
-        return text.replace(re, `<strong>$&</strong>`);
-      };
+        return text.replace(re, `<strong>$&</strong>`)
+      }
     },
 
     escapedQuery() {
-      return escapeRegExp(sanitize(this.query));
+      return escapeRegExp(sanitize(this.query))
     },
 
     matchedItems() {
@@ -95,63 +95,63 @@ export default {
         this.query.length === 0 ||
         this.query.length < this.minMatchingChars
       ) {
-        return [];
+        return []
       }
 
-      const re = new RegExp(this.escapedQuery, "gi");
+      const re = new RegExp(this.escapedQuery, 'gi')
 
       // Filter, sort, and concat
       return this.data
         .filter(i => i.text.match(re) !== null)
         .sort((a, b) => {
-          const aIndex = a.text.indexOf(a.text.match(re)[0]);
-          const bIndex = b.text.indexOf(b.text.match(re)[0]);
+          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;
+            return -1
           }
           if (aIndex > bIndex) {
-            return 1;
+            return 1
           }
-          return 0;
+          return 0
         })
-        .slice(0, this.maxMatches);
+        .slice(0, this.maxMatches)
     }
   },
 
   methods: {
     handleHit(item, evt) {
-      this.$emit("hit", item);
-      evt.preventDefault();
+      this.$emit('hit', item)
+      evt.preventDefault()
     },
 
     hitActiveListItem() {
       if (this.activeListItem >= 0) {
-        this.$emit("hit", this.matchedItems[this.activeListItem]);
+        this.$emit('hit', this.matchedItems[this.activeListItem])
       }
     },
 
     isListItemActive(id) {
-      return this.activeListItem === id;
+      return this.activeListItem === id
     },
 
     resetActiveListItem() {
-      this.activeListItem = -1;
+      this.activeListItem = -1
     },
 
     selectNextListItem() {
       if (this.activeListItem < this.matchedItems.length - 1) {
-        this.activeListItem++;
+        this.activeListItem++
       } else {
-        this.activeListItem = -1;
+        this.activeListItem = -1
       }
     },
 
     selectPreviousListItem() {
       if (this.activeListItem < 0) {
-        this.activeListItem = this.matchedItems.length - 1;
+        this.activeListItem = this.matchedItems.length - 1
       } else {
-        this.activeListItem--;
+        this.activeListItem--
       }
     }
   },
@@ -159,20 +159,20 @@ export default {
   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 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;
+          scrollContainer.scrollTop = listItemHeight * this.activeListItem
         } else {
-          scrollContainer.scrollTop = 0;
+          scrollContainer.scrollTop = 0
         }
       }
     }
   }
-};
+}
 </script>

From 08542fd87c990d0cd7fadaa41b2696e1f7fcec93 Mon Sep 17 00:00:00 2001
From: Matt DeDiana <matt@fluencyinc.co>
Date: Wed, 28 Nov 2018 12:30:00 -0500
Subject: [PATCH 6/6] Increased unit test coverage

---
 tests/unit/VueBootstrapTypeaheadList.spec.js | 67 +++++++++++++++++++-
 1 file changed, 66 insertions(+), 1 deletion(-)

diff --git a/tests/unit/VueBootstrapTypeaheadList.spec.js b/tests/unit/VueBootstrapTypeaheadList.spec.js
index d5e3668..8cad580 100644
--- a/tests/unit/VueBootstrapTypeaheadList.spec.js
+++ b/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()
+  })
 })
+