diff --git a/docs/guide/reference.md b/docs/guide/reference.md index 77d1b92..1f78b15 100644 --- a/docs/guide/reference.md +++ b/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 diff --git a/src/components/VueTypeaheadBootstrap.vue b/src/components/VueTypeaheadBootstrap.vue index 7b40a20..32acbed 100644 --- a/src/components/VueTypeaheadBootstrap.vue +++ b/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 diff --git a/tests/unit/VueTypeaheadBootstrap.spec.js b/tests/unit/VueTypeaheadBootstrap.spec.js index fe5c082..af55c08 100644 --- a/tests/unit/VueTypeaheadBootstrap.spec.js +++ b/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() + }) }) })