diff --git a/src/mixins/typeAheadPointer.js b/src/mixins/typeAheadPointer.js index 331cfec..725796a 100644 --- a/src/mixins/typeAheadPointer.js +++ b/src/mixins/typeAheadPointer.js @@ -56,16 +56,18 @@ export default { * Optionally clear the search input on selection. * @return {void} */ - typeAheadSelect () { - if (!this.taggable && this.filteredOptions[this.typeAheadPointer]) { - this.select(this.filteredOptions[this.typeAheadPointer]); + typeAheadSelect() { + const typeAheadOption = this.filteredOptions[this.typeAheadPointer]; + + if (typeAheadOption) { + this.select(typeAheadOption); } else if (this.taggable && this.search.length) { this.select(this.createOption(this.search)); } if (this.clearSearchOnSelect) { - this.search = ''; + this.search = ""; } - }, + } } } diff --git a/tests/unit/Tagging.spec.js b/tests/unit/Tagging.spec.js index 9e32979..8b9d918 100755 --- a/tests/unit/Tagging.spec.js +++ b/tests/unit/Tagging.spec.js @@ -1,4 +1,4 @@ -import { searchSubmit, selectWithProps } from "../helpers"; +import { mountDefault, searchSubmit, selectWithProps } from '../helpers'; import Select from '../../src/components/Select'; describe("When Tagging Is Enabled", () => { @@ -243,4 +243,17 @@ describe("When Tagging Is Enabled", () => { expect(Select.vm.selectedValue).toEqual([{ label: "one" }]); expect(Select.vm.search).toEqual(""); }); + + it("will select an existing option on tab", async () => { + const Select = mountDefault({ + taggable: true, + selectOnTab: true + }); + + Select.vm.typeAheadPointer = 0; + Select.find({ ref: "search" }).trigger("keydown.tab"); + + await Select.vm.$nextTick(); + expect(Select.vm.selectedValue).toEqual(['one']); + }) });