WIP potential spec for #956

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) {
+        if (this.delegate.search.hasOwnProperty(e.keyCode)) {
-          case 8:
+          return this.delegate.search[e.keyCode](e);
-            //  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();
         }
       }
     },
 
     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

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);
   })

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