Emit focus event when input receives focus (#154)

Related to #18

Author: drikusroor

docs/guide/reference.md

@@ -33,6 +33,7 @@ Name | Description
 hit | Triggered when an autocomplete item is selected. The entry in the input data array that was selected is returned. If no autocomplete item is selected, the first entry matching the query is selected and returned.
 input | The component can be used with `v-model`
 keyup | Triggered when any keyup event is fired in the input. Often used for catching `keyup.enter`.
+focus | Triggered when the input element receives focus.
 blur | Triggered when the input field loses focus, except when pressing the `tab` key to focus the dropdown list.
 
 ## Slots

src/components/VueTypeaheadBootstrap.vue

@@ -28,7 +28,7 @@
         :aria-label="(!ariaLabelledBy) ? placeholder : false"
         :value="inputValue"
         :disabled="disabled"
-        @focus="isFocused = true"
+        @focus="handleFocus"
         @blur="handleFocusOut"
         @input="handleInput($event.target.value)"
         @keydown.esc="handleEsc($event.target.value)"
@@ -171,6 +171,8 @@ export default {
     highlightClass: String
   },
 
+  emits: ['hit', 'input', 'keyup', 'focus', 'blur'],
+
   computed: {
     id() {
       return Math.floor(Math.random() * 100000)
@@ -257,6 +259,11 @@ export default {
       }
     },
 
+    handleFocus() {
+      this.$emit('focus')
+      this.isFocused = true
+    },
+
     handleInput(newValue) {
       this.isFocused = true
       this.inputValue = newValue

tests/unit/VueTypeaheadBootstrap.spec.js

@@ -187,5 +187,11 @@ describe('VueTypeaheadBootstrap', () => {
 
       expect(wrapper.emitted().blur).toBeFalsy()
     })
+
+    it('Emits a focus event when the underlying input field receives focus', async () => {
+      let input = wrapper.find('input')
+      await input.trigger('focus')
+      expect(wrapper.emitted().focus).toBeTruthy()
+    })
   })
 })