diff --git a/src/components/Select.vue b/src/components/Select.vue index 4fdd2c5..a20b839 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -467,6 +467,11 @@ searchInputQuerySelector: { type: String, default: '[type=search]' + }, + + handlers: { + type: Function, + default: (handlers, vm) => handlers, } }, @@ -845,33 +850,34 @@ * @return {Function} */ onSearchKeyDown (e) { - switch (e.keyCode) { - case 8: - // delete - return this.maybeDeleteValue(); - case 9: - // tab - return this.onTab(); - case 13: - // enter.prevent - e.preventDefault(); - return this.typeAheadSelect(); - case 27: - // esc - return this.onEscape(); - case 38: - // up.prevent - e.preventDefault(); - return this.typeAheadUp(); - case 40: - // down.prevent - e.preventDefault(); - return this.typeAheadDown(); + if (this.delegate.search.hasOwnProperty(e.keyCode)) { + return this.delegate.search[e.keyCode](e); } } }, computed: { + delegate () { + return this.handlers({ + search: { + 8: e => this.maybeDeleteValue(), // delete + 9: e => this.onTab(), // tab + 13: e => { // enter.prevent + e.preventDefault(); + return this.typeAheadSelect(); + }, + 27: e => this.onEscape(), // esc + 38: e => { // up.prevent + e.preventDefault(); + return this.typeAheadUp(); + }, + 40: e => { // down.prevent + e.preventDefault(); + return this.typeAheadDown(); + }, + } + }, this); + }, /** * Determine if the component needs to diff --git a/tests/unit/Selectable.spec.js b/tests/unit/Selectable.spec.js index 8812834..01d3952 100644 --- a/tests/unit/Selectable.spec.js +++ b/tests/unit/Selectable.spec.js @@ -4,7 +4,7 @@ describe("Selectable prop", () => { it("should select selectable option if clicked", () => { const Select = selectWithProps({ options: ["one", "two", "three"], - selectable: (option) => option == "one" + selectable: (option) => option === "one" }); Select.vm.$data.open = true; @@ -16,7 +16,7 @@ describe("Selectable prop", () => { it("should not select not selectable option if clicked", () => { const Select = selectWithProps({ options: ["one", "two", "three"], - selectable: (option) => option == "one" + selectable: (option) => option === "one" }); Select.vm.$data.open = true; @@ -33,7 +33,7 @@ describe("Selectable prop", () => { Select.vm.typeAheadPointer = 1; - Select.find({ ref: "search" }).trigger("keyup.down"); + Select.find({ ref: "search" }).trigger("keydown.down"); expect(Select.vm.typeAheadPointer).toEqual(2); }) @@ -46,7 +46,7 @@ describe("Selectable prop", () => { Select.vm.typeAheadPointer = 2; - Select.find({ ref: "search" }).trigger("keyup.up"); + Select.find({ ref: "search" }).trigger("keydown.up"); expect(Select.vm.typeAheadPointer).toEqual(0); }) diff --git a/tests/unit/Selecting.spec.js b/tests/unit/Selecting.spec.js index d4d1489..5af30c3 100755 --- a/tests/unit/Selecting.spec.js +++ b/tests/unit/Selecting.spec.js @@ -49,7 +49,7 @@ describe("VS - Selecting Values", () => { expect(Select.selectedValue).toEqual(Select.value); }); - it("can select an option on tab", () => { + fit("can select an option on tab", () => { const Select = shallowMount(VueSelect, { propsData: { selectOnTab: true