From c9c4872f5ad43a983d805ddfadd12bd7410bcaf2 Mon Sep 17 00:00:00 2001
From: Alex <aldragan93@gmail.com>
Date: Mon, 7 Oct 2019 00:11:23 -0400
Subject: [PATCH 01/20] Fix unclickable dead zones around dropdown and dropdown
 arrow

---
 src/components/Select.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index a80efdd..f6d999b 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -28,7 +28,7 @@
         </slot>
       </div>
 
-      <div class="vs__actions">
+      <div class="vs__actions" ref="actions">
         <button
           v-show="showClearButton"
           :disabled="disabled"
@@ -620,6 +620,8 @@
           this.$el,
           this.searchEl,
           this.$refs.toggle,
+          this.$refs.actions,
+          this.$refs.selectedOptions,
         ];
 
         if (typeof this.$refs.openIndicator !== 'undefined') {

From 7c66f755797d98e513b859bc7a933146f7193080 Mon Sep 17 00:00:00 2001
From: Jeff <jeff.sagal@briteweb.com>
Date: Fri, 25 Oct 2019 13:59:23 -0700
Subject: [PATCH 02/20] WIP potential spec for #956

---
 src/components/Select.vue     | 50 ++++++++++++++++++++---------------
 tests/unit/Selectable.spec.js |  8 +++---
 tests/unit/Selecting.spec.js  |  2 +-
 3 files changed, 33 insertions(+), 27 deletions(-)

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

From 74917d2a5a93389f92c1af117ff0c3de9d033c17 Mon Sep 17 00:00:00 2001
From: Jeff <jeff.sagal@briteweb.com>
Date: Fri, 25 Oct 2019 18:07:45 -0700
Subject: [PATCH 03/20] refactor, bit cleaner API

---
 dev/Dev.vue               | 19 ++++++++++-
 src/components/Select.vue | 66 +++++++++++++++++++++++----------------
 2 files changed, 57 insertions(+), 28 deletions(-)

diff --git a/dev/Dev.vue b/dev/Dev.vue
index d180b1a..8837244 100644
--- a/dev/Dev.vue
+++ b/dev/Dev.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <sandbox hide-help v-slot="config">
-      <v-select v-bind="config" />
+      <v-select taggable multiple no-drop :map-keydown="handlers"/>
     </sandbox>
   </div>
 </template>
@@ -14,6 +14,23 @@ import Sandbox from '../docs/.vuepress/components/Sandbox';
 
 export default {
   components: {Sandbox, vSelect},
+  methods: {
+    handlers (map, vm) {
+      const createTag = e => {
+        e.preventDefault();
+        vm.typeAheadSelect();
+        vm.searchEl.focus();
+      };
+
+      return {
+        ...map,
+        9: createTag,
+        13: createTag,
+        32: createTag,
+        188: createTag,
+      };
+    },
+  },
 };
 </script>
 
diff --git a/src/components/Select.vue b/src/components/Select.vue
index a20b839..e290ede 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -469,9 +469,19 @@
         default: '[type=search]'
       },
 
-      handlers: {
+      /**
+       * Used to modify the default keydown events map
+       * for the search input. Can be used to implement
+       * custom behaviour for key presses.
+       */
+      mapKeydown: {
         type: Function,
-        default: (handlers, vm) => handlers,
+        /**
+         * @param map {Object}
+         * @param vm {Vue/Component}
+         * @return {Object}
+         */
+        default: (map, vm) => map,
       }
     },
 
@@ -845,40 +855,42 @@
       },
 
       /**
-       * Search 'input' KeyBoardEvent handler.
+       * Search <input> KeyBoardEvent handler.
        * @param e {KeyboardEvent}
        * @return {Function}
        */
       onSearchKeyDown (e) {
-        if (this.delegate.search.hasOwnProperty(e.keyCode)) {
-          return this.delegate.search[e.keyCode](e);
+        const handlers = this.mapKeydown({
+          //  delete
+          8: e => this.maybeDeleteValue(),
+          //  tab
+          9: e => this.onTab(),
+          //  enter.prevent
+          13: e => {
+            e.preventDefault();
+            return this.typeAheadSelect();
+          },
+          //  esc
+          27: e => this.onEscape(),
+          //  up.prevent
+          38: e => {
+            e.preventDefault();
+            return this.typeAheadUp();
+          },
+          //  down.prevent
+          40: e => {
+            e.preventDefault();
+            return this.typeAheadDown();
+          },
+        }, this);
+
+        if (typeof handlers[e.keyCode] === 'function') {
+          return handlers[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
        * track the state of values internally.

From 4f409522de42b4c4fc5b8d4fe289f248fd029267 Mon Sep 17 00:00:00 2001
From: Jeff <jeff.sagal@briteweb.com>
Date: Fri, 25 Oct 2019 18:47:33 -0700
Subject: [PATCH 04/20] add docs

---
 docs/.vuepress/components/CustomHandlers.vue | 30 +++++++++++
 docs/.vuepress/config.js                     |  9 +++-
 docs/guide/keydown.md                        | 52 ++++++++++++++++++++
 3 files changed, 90 insertions(+), 1 deletion(-)
 create mode 100644 docs/.vuepress/components/CustomHandlers.vue
 create mode 100644 docs/guide/keydown.md

diff --git a/docs/.vuepress/components/CustomHandlers.vue b/docs/.vuepress/components/CustomHandlers.vue
new file mode 100644
index 0000000..6eaa91b
--- /dev/null
+++ b/docs/.vuepress/components/CustomHandlers.vue
@@ -0,0 +1,30 @@
+<template>
+  <v-select
+    taggable
+    multiple
+    no-drop
+    :map-keydown="handlers"
+    placeholder="try tagging with space or comma to submit"
+  />
+</template>
+
+<script>
+export default {
+  name: 'CustomHandlers',
+  methods: {
+    handlers (map, vm) {
+      const createTag = e => {
+        e.preventDefault();
+        vm.typeAheadSelect();
+        vm.searchEl.focus();
+      };
+
+      return {
+        ...map, //  defaults
+        32: createTag,  //  space
+        188: createTag,  //  comma
+      };
+    },
+  },
+};
+</script>
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index d8d80e0..a29d57c 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -114,7 +114,7 @@ module.exports = {
           ],
         },
         {
-          title: 'Digging Deeper',
+          title: 'Use Cases',
           collapsable: false,
           children: [
             ['guide/validation', 'Validation'],
@@ -122,6 +122,13 @@ module.exports = {
             ['guide/ajax', 'AJAX'],
           ],
         },
+        {
+          title: 'Customizing',
+          collapsable: false,
+          children: [
+            ['guide/keydown', 'Keydown Events'],
+          ],
+        },
         {
           title: 'API',
           collapsable: false,
diff --git a/docs/guide/keydown.md b/docs/guide/keydown.md
new file mode 100644
index 0000000..c2c3f69
--- /dev/null
+++ b/docs/guide/keydown.md
@@ -0,0 +1,52 @@
+### Customizing Keydown Behaviour
+---
+
+Vue Select provides the `map-keydown` Function prop to allow for customizing the components response to 
+keydown events while the input has focus. Here's the default function definition:
+
+```js
+/**
+ * @param map {Object} Mapped keyCode to handlers { <keyCode>: <callback> }
+ * @param vm {Vue/Component} Vue Select instance
+ * @return {Object}
+ */
+(map, vm) => map,
+```
+
+By default, the prop is a no–op returning the same object `map` object it receives. This object
+maps keyCodes to handlers: `{ <keyCode>: <callback> }`. Modifying this object can override default
+functionality, or add handlers for different keys that the component doesn't normally listen for.
+
+### Example: Tag on `comma` and `space`
+
+If I have a taggable input, and I want `comma` or `space` to 'tag' the current option, you could 
+solve that with map-keydown. Since the tab button already creates tags, we can copy the handler
+for keyCode 9.
+
+```vue
+<template>
+  <v-select taggable multiple no-drop :map-keydown="handlers"/>
+</template>
+
+<script>
+export default {
+  methods: {
+    handlers (map, vm) {
+      const createTag = e => {
+        e.preventDefault();
+        vm.typeAheadSelect();
+        vm.searchEl.focus();
+      };
+
+      return {
+        ...map, //  defaults
+        32: createTag,  //  space
+        188: createTag,  //  comma
+      };
+    },
+  },
+};
+</script>
+```
+
+<custom-handlers></custom-handlers>

From 8d9905c3dce26734f679f71fdd98efaf0a0f32b7 Mon Sep 17 00:00:00 2001
From: Jeff <jeff.sagal@briteweb.com>
Date: Fri, 25 Oct 2019 18:48:46 -0700
Subject: [PATCH 05/20] whoops

---
 tests/unit/Selecting.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/unit/Selecting.spec.js b/tests/unit/Selecting.spec.js
index 5af30c3..d4d1489 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);
   });
 
-  fit("can select an option on tab", () => {
+  it("can select an option on tab", () => {
     const Select = shallowMount(VueSelect, {
       propsData: {
         selectOnTab: true

From 877e6a3c858d58ebcf86addd8a6e64a257e1f992 Mon Sep 17 00:00:00 2001
From: Jeff <jeff.sagal@briteweb.com>
Date: Thu, 7 Nov 2019 12:40:43 -0800
Subject: [PATCH 06/20] reset dev env

---
 dev/Dev.vue                   | 19 +------------------
 src/handlers/searchKeyDown.js |  0
 2 files changed, 1 insertion(+), 18 deletions(-)
 create mode 100644 src/handlers/searchKeyDown.js

diff --git a/dev/Dev.vue b/dev/Dev.vue
index 8837244..880c8c2 100644
--- a/dev/Dev.vue
+++ b/dev/Dev.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <sandbox hide-help v-slot="config">
-      <v-select taggable multiple no-drop :map-keydown="handlers"/>
+      <v-select v-bind="config"/>
     </sandbox>
   </div>
 </template>
@@ -14,23 +14,6 @@ import Sandbox from '../docs/.vuepress/components/Sandbox';
 
 export default {
   components: {Sandbox, vSelect},
-  methods: {
-    handlers (map, vm) {
-      const createTag = e => {
-        e.preventDefault();
-        vm.typeAheadSelect();
-        vm.searchEl.focus();
-      };
-
-      return {
-        ...map,
-        9: createTag,
-        13: createTag,
-        32: createTag,
-        188: createTag,
-      };
-    },
-  },
 };
 </script>
 
diff --git a/src/handlers/searchKeyDown.js b/src/handlers/searchKeyDown.js
new file mode 100644
index 0000000..e69de29

From 2ca2f3094b5a98a318bb7691f4c0600d9071dbbe Mon Sep 17 00:00:00 2001
From: Jeff <jeff.sagal@briteweb.com>
Date: Thu, 7 Nov 2019 14:08:37 -0800
Subject: [PATCH 07/20] add selectOnKeyCodes prop, add tests

---
 src/components/Select.vue     | 29 +++++++++++++++++------
 src/handlers/searchKeyDown.js | 28 ++++++++++++++++++++++
 tests/unit/Keydown.spec.js    | 44 +++++++++++++++++++++++++++++++++++
 3 files changed, 94 insertions(+), 7 deletions(-)
 create mode 100644 tests/unit/Keydown.spec.js

diff --git a/src/components/Select.vue b/src/components/Select.vue
index e290ede..18a0edb 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -302,6 +302,7 @@
 
       /**
        * Select the current value if selectOnTab is enabled
+       * @deprecated
        */
       onTab: {
         type: Function,
@@ -449,12 +450,22 @@
       /**
        * When true, hitting the 'tab' key will select the current select value
        * @type {Boolean}
+       * @deprecated
        */
       selectOnTab: {
         type: Boolean,
         default: false
       },
 
+      /**
+       * Keycodes that will select the current option.
+       * @type Array
+       */
+      selectOnKeyCodes: {
+        type: Array,
+        default: () => [13],
+      },
+
       /**
        * Query Selector used to find the search input
        * when the 'search' scoped slot is used.
@@ -860,16 +871,16 @@
        * @return {Function}
        */
       onSearchKeyDown (e) {
-        const handlers = this.mapKeydown({
+        const preventAndSelect = e => {
+          e.preventDefault();
+          return this.typeAheadSelect();
+        };
+
+        const defaults = {
           //  delete
           8: e => this.maybeDeleteValue(),
           //  tab
           9: e => this.onTab(),
-          //  enter.prevent
-          13: e => {
-            e.preventDefault();
-            return this.typeAheadSelect();
-          },
           //  esc
           27: e => this.onEscape(),
           //  up.prevent
@@ -882,7 +893,11 @@
             e.preventDefault();
             return this.typeAheadDown();
           },
-        }, this);
+        };
+
+        this.selectOnKeyCodes.forEach(keyCode => defaults[keyCode] = preventAndSelect);
+
+        const handlers = this.mapKeydown(defaults, this);
 
         if (typeof handlers[e.keyCode] === 'function') {
           return handlers[e.keyCode](e);
diff --git a/src/handlers/searchKeyDown.js b/src/handlers/searchKeyDown.js
index e69de29..bd9db89 100644
--- a/src/handlers/searchKeyDown.js
+++ b/src/handlers/searchKeyDown.js
@@ -0,0 +1,28 @@
+export default {
+  //  delete
+  8: e => this.maybeDeleteValue(),
+
+  //  tab
+  9: e => this.onTab(),
+
+  //  enter.prevent
+  13: e => {
+    e.preventDefault();
+    return this.typeAheadSelect();
+  },
+
+  //  esc
+  27: e => this.onEscape(),
+
+  //  up.prevent
+  38: e => {
+    e.preventDefault();
+    return this.typeAheadUp();
+  },
+
+  //  down.prevent
+  40: e => {
+    e.preventDefault();
+    return this.typeAheadDown();
+  },
+};
diff --git a/tests/unit/Keydown.spec.js b/tests/unit/Keydown.spec.js
new file mode 100644
index 0000000..56d390b
--- /dev/null
+++ b/tests/unit/Keydown.spec.js
@@ -0,0 +1,44 @@
+import { mountDefault } from '../helpers';
+
+describe('Custom Keydown Handlers', () => {
+
+  it('can use the map-keydown prop to trigger custom behaviour', () => {
+    const onKeyDown = jest.fn();
+    const Select = mountDefault({
+      mapKeydown: (defaults, vm) => ({...defaults, 32: onKeyDown}),
+    });
+
+    Select.find({ref: 'search'}).trigger('keydown.space');
+
+    expect(onKeyDown.mock.calls.length).toBe(1);
+  });
+
+  it('selectOnKeyCodes should trigger a selection for custom keycodes', () => {
+    const Select = mountDefault({
+      selectOnKeyCodes: [32],
+    });
+
+    const spy = jest.spyOn(Select.vm, 'typeAheadSelect');
+
+    Select.find({ref: 'search'}).trigger('keydown.space');
+
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('even works when combining selectOnKeyCodes with map-keydown', () => {
+    const onKeyDown = jest.fn();
+    const Select = mountDefault({
+      mapKeydown: (defaults, vm) => ({...defaults, 32: onKeyDown}),
+      selectOnKeyCodes: [9],
+    });
+
+    const spy = jest.spyOn(Select.vm, 'typeAheadSelect');
+
+    Select.find({ref: 'search'}).trigger('keydown.space');
+    expect(onKeyDown.mock.calls.length).toBe(1);
+
+    Select.find({ref: 'search'}).trigger('keydown.tab');
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+});

From bc5d0d9e4a7f60b74a06da5595dea941c39a4f94 Mon Sep 17 00:00:00 2001
From: Jeff <sagalbot@gmail.com>
Date: Thu, 7 Nov 2019 14:10:10 -0800
Subject: [PATCH 08/20] remove unused file

---
 src/handlers/searchKeyDown.js | 28 ----------------------------
 1 file changed, 28 deletions(-)
 delete mode 100644 src/handlers/searchKeyDown.js

diff --git a/src/handlers/searchKeyDown.js b/src/handlers/searchKeyDown.js
deleted file mode 100644
index bd9db89..0000000
--- a/src/handlers/searchKeyDown.js
+++ /dev/null
@@ -1,28 +0,0 @@
-export default {
-  //  delete
-  8: e => this.maybeDeleteValue(),
-
-  //  tab
-  9: e => this.onTab(),
-
-  //  enter.prevent
-  13: e => {
-    e.preventDefault();
-    return this.typeAheadSelect();
-  },
-
-  //  esc
-  27: e => this.onEscape(),
-
-  //  up.prevent
-  38: e => {
-    e.preventDefault();
-    return this.typeAheadUp();
-  },
-
-  //  down.prevent
-  40: e => {
-    e.preventDefault();
-    return this.typeAheadDown();
-  },
-};

From 8cce5e0ea2bad37ff68acb18739c54dbf46debb3 Mon Sep 17 00:00:00 2001
From: Jeff <jeff.sagal@briteweb.com>
Date: Thu, 7 Nov 2019 15:45:12 -0800
Subject: [PATCH 09/20] add support for composing #900

---
 src/components/Select.vue  | 16 +++++++++++-----
 tests/unit/Keydown.spec.js | 30 ++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 18a0edb..d7f3ef1 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -79,6 +79,9 @@
   import ajax from '../mixins/ajax'
   import childComponents from './childComponents';
 
+  /**
+   * @name VueSelect
+   */
   export default {
     components: {...childComponents},
 
@@ -302,12 +305,12 @@
 
       /**
        * Select the current value if selectOnTab is enabled
-       * @deprecated
+       * @deprecated since 3.3
        */
       onTab: {
         type: Function,
         default: function () {
-          if (this.selectOnTab) {
+          if (this.selectOnTab && !this.isComposing) {
             this.typeAheadSelect();
           }
         },
@@ -450,7 +453,7 @@
       /**
        * When true, hitting the 'tab' key will select the current select value
        * @type {Boolean}
-       * @deprecated
+       * @deprecated since 3.3 - use selectOnKeyCodes instead
        */
       selectOnTab: {
         type: Boolean,
@@ -500,6 +503,7 @@
       return {
         search: '',
         open: false,
+        isComposing: false,
         pushedTags: [],
         _value: [] // Internal value managed by Vue Select if no `value` prop is passed
       }
@@ -873,7 +877,7 @@
       onSearchKeyDown (e) {
         const preventAndSelect = e => {
           e.preventDefault();
-          return this.typeAheadSelect();
+          return !this.isComposing && this.typeAheadSelect();
         };
 
         const defaults = {
@@ -977,10 +981,12 @@
               'value': this.search,
             },
             events: {
+              'compositionstart': () => this.isComposing = true,
+              'compositionend': () => this.isComposing = false,
               'keydown': this.onSearchKeyDown,
               'blur': this.onSearchBlur,
               'focus': this.onSearchFocus,
-              'input': (e) => this.search = e.target.value
+              'input': (e) => this.search = e.target.value,
             },
           },
           spinner: {
diff --git a/tests/unit/Keydown.spec.js b/tests/unit/Keydown.spec.js
index 56d390b..4721719 100644
--- a/tests/unit/Keydown.spec.js
+++ b/tests/unit/Keydown.spec.js
@@ -41,4 +41,34 @@ describe('Custom Keydown Handlers', () => {
     expect(spy).toHaveBeenCalledTimes(1);
   });
 
+  describe('CompositionEvent support', () => {
+
+    it('will not select a value with enter if the user is composing', () => {
+      const Select = mountDefault();
+      const spy = jest.spyOn(Select.vm, 'typeAheadSelect');
+
+      Select.find({ref: 'search'}).trigger('compositionstart');
+      Select.find({ref: 'search'}).trigger('keydown.enter');
+      expect(spy).toHaveBeenCalledTimes(0);
+
+      Select.find({ref: 'search'}).trigger('compositionend');
+      Select.find({ref: 'search'}).trigger('keydown.enter');
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it('will not select a value with tab if the user is composing', () => {
+      const Select = mountDefault({selectOnTab: true});
+      const spy = jest.spyOn(Select.vm, 'typeAheadSelect');
+
+      Select.find({ref: 'search'}).trigger('compositionstart');
+      Select.find({ref: 'search'}).trigger('keydown.tab');
+      expect(spy).toHaveBeenCalledTimes(0);
+
+      Select.find({ref: 'search'}).trigger('compositionend');
+      Select.find({ref: 'search'}).trigger('keydown.tab');
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+  });
+
 });

From af424159f7cc7bfceaada17f4ea0d18b3d8985b5 Mon Sep 17 00:00:00 2001
From: Jeff <sagalbot@gmail.com>
Date: Thu, 7 Nov 2019 17:15:48 -0800
Subject: [PATCH 10/20] update docs

---
 docs/.vuepress/components/CustomHandlers.vue | 29 ++++----
 docs/guide/keydown.md                        | 69 ++++++++++++--------
 src/components/Select.vue                    |  2 +-
 3 files changed, 53 insertions(+), 47 deletions(-)

diff --git a/docs/.vuepress/components/CustomHandlers.vue b/docs/.vuepress/components/CustomHandlers.vue
index 6eaa91b..8fa43e8 100644
--- a/docs/.vuepress/components/CustomHandlers.vue
+++ b/docs/.vuepress/components/CustomHandlers.vue
@@ -1,10 +1,10 @@
 <template>
   <v-select
-    taggable
-    multiple
-    no-drop
-    :map-keydown="handlers"
-    placeholder="try tagging with space or comma to submit"
+          taggable
+          multiple
+          no-drop
+          :map-keydown="handlers"
+          placeholder="enter an email"
   />
 </template>
 
@@ -12,19 +12,14 @@
 export default {
   name: 'CustomHandlers',
   methods: {
-    handlers (map, vm) {
-      const createTag = e => {
+    handlers: (map, vm) => ({
+      ...map, 50: e => {
         e.preventDefault();
-        vm.typeAheadSelect();
-        vm.searchEl.focus();
-      };
-
-      return {
-        ...map, //  defaults
-        32: createTag,  //  space
-        188: createTag,  //  comma
-      };
-    },
+        if( e.key === '@' && vm.search.length > 0 ) {
+          vm.search = `${vm.search}@gmail.com`;
+        }
+      },
+    }),
   },
 };
 </script>
diff --git a/docs/guide/keydown.md b/docs/guide/keydown.md
index c2c3f69..f2938ed 100644
--- a/docs/guide/keydown.md
+++ b/docs/guide/keydown.md
@@ -1,13 +1,19 @@
 ### Customizing Keydown Behaviour
 ---
 
+## `selectOnKeyCodes`
+
+
+
+## `mapKeyDown`
+
 Vue Select provides the `map-keydown` Function prop to allow for customizing the components response to 
-keydown events while the input has focus. Here's the default function definition:
+keydown events while the search input has focus.
 
 ```js
 /**
- * @param map {Object} Mapped keyCode to handlers { <keyCode>: <callback> }
- * @param vm {Vue/Component} Vue Select instance
+ * @param map {Object} Mapped keyCode to handlers { <keyCode>:<callback> }
+ * @param vm {VueSelect}
  * @return {Object}
  */
 (map, vm) => map,
@@ -17,36 +23,41 @@ By default, the prop is a no–op returning the same object `map` object it rece
 maps keyCodes to handlers: `{ <keyCode>: <callback> }`. Modifying this object can override default
 functionality, or add handlers for different keys that the component doesn't normally listen for.
 
-### Example: Tag on `comma` and `space`
+**Default Handlers**
 
-If I have a taggable input, and I want `comma` or `space` to 'tag' the current option, you could 
-solve that with map-keydown. Since the tab button already creates tags, we can copy the handler
-for keyCode 9.
+```js
+//  delete
+8: e => this.maybeDeleteValue()
 
-```vue
-<template>
-  <v-select taggable multiple no-drop :map-keydown="handlers"/>
-</template>
+//  tab
+9: e => this.onTab()
 
-<script>
-export default {
-  methods: {
-    handlers (map, vm) {
-      const createTag = e => {
-        e.preventDefault();
-        vm.typeAheadSelect();
-        vm.searchEl.focus();
-      };
+//  enter
+13: e => {
+    e.preventDefault();
+    return this.typeAheadSelect();
+}
 
-      return {
-        ...map, //  defaults
-        32: createTag,  //  space
-        188: createTag,  //  comma
-      };
-    },
-  },
-};
-</script>
+//  esc
+27: e => this.onEscape()
+
+//  up
+38: e => {
+    e.preventDefault();
+    return this.typeAheadUp();
+}
+
+//  down
+40: e => {
+    e.preventDefault();
+    return this.typeAheadDown();
+}
 ```
 
+### Example: Autocomplete Email Addresses
+
+This is example listens for the `@` key, and autocompletes an email address with `@gmail.com`.
+
+<<< @/.vuepress/components/CustomHandlers.vue
+
 <custom-handlers></custom-handlers>
diff --git a/src/components/Select.vue b/src/components/Select.vue
index d7f3ef1..511861d 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -492,7 +492,7 @@
         type: Function,
         /**
          * @param map {Object}
-         * @param vm {Vue/Component}
+         * @param vm {VueSelect}
          * @return {Object}
          */
         default: (map, vm) => map,

From a87cb3317e82655f85c83545d8f46b393b7f8d92 Mon Sep 17 00:00:00 2001
From: Jeff <jeff.sagal@briteweb.com>
Date: Fri, 8 Nov 2019 10:43:36 -0800
Subject: [PATCH 11/20] complete documentation

---
 docs/.vuepress/components/TagOnComma.vue |  4 ++++
 docs/guide/keydown.md                    | 15 +++++++++++----
 2 files changed, 15 insertions(+), 4 deletions(-)
 create mode 100644 docs/.vuepress/components/TagOnComma.vue

diff --git a/docs/.vuepress/components/TagOnComma.vue b/docs/.vuepress/components/TagOnComma.vue
new file mode 100644
index 0000000..59e1d6a
--- /dev/null
+++ b/docs/.vuepress/components/TagOnComma.vue
@@ -0,0 +1,4 @@
+<template>
+  <!-- tag on 188/comma & 13/return -->
+  <v-select no-drop taggable multiple :select-on-key-codes="[188, 13]" />
+</template>
diff --git a/docs/guide/keydown.md b/docs/guide/keydown.md
index f2938ed..bdef0df 100644
--- a/docs/guide/keydown.md
+++ b/docs/guide/keydown.md
@@ -1,11 +1,17 @@
 ### Customizing Keydown Behaviour
 ---
 
-## `selectOnKeyCodes`
+## selectOnKeyCodes <Badge text="v3.3.0+" />
 
+`selectOnKeyCodes {Array}` is an array of keyCodes that will trigger a typeAheadSelect. Any keyCodes
+ in this array will prevent the default event action and trigger a typeahead select. By default, 
+ it's just `[13]` for return. For example, maybe you want to tag on a comma keystroke
+ 
+<TagOnComma /> 
+ 
+<<< @/.vuepress/components/TagOnComma.vue
 
-
-## `mapKeyDown`
+## mapKeyDown <Badge text="v3.3.0+" />
 
 Vue Select provides the `map-keydown` Function prop to allow for customizing the components response to 
 keydown events while the search input has focus.
@@ -58,6 +64,7 @@ functionality, or add handlers for different keys that the component doesn't nor
 
 This is example listens for the `@` key, and autocompletes an email address with `@gmail.com`.
 
+<CustomHandlers />
+
 <<< @/.vuepress/components/CustomHandlers.vue
 
-<custom-handlers></custom-handlers>

From 1e6b0e98d093ca9ce972b118762da148a89e25ae Mon Sep 17 00:00:00 2001
From: Jeff <sagalbot@gmail.com>
Date: Fri, 8 Nov 2019 10:50:36 -0800
Subject: [PATCH 12/20] add keycodes note

---
 docs/guide/keydown.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/docs/guide/keydown.md b/docs/guide/keydown.md
index bdef0df..b353960 100644
--- a/docs/guide/keydown.md
+++ b/docs/guide/keydown.md
@@ -5,7 +5,7 @@
 
 `selectOnKeyCodes {Array}` is an array of keyCodes that will trigger a typeAheadSelect. Any keyCodes
  in this array will prevent the default event action and trigger a typeahead select. By default, 
- it's just `[13]` for return. For example, maybe you want to tag on a comma keystroke
+ it's just `[13]` for return. For example, maybe you want to tag on a comma keystroke:
  
 <TagOnComma /> 
  
@@ -29,6 +29,9 @@ By default, the prop is a no–op returning the same object `map` object it rece
 maps keyCodes to handlers: `{ <keyCode>: <callback> }`. Modifying this object can override default
 functionality, or add handlers for different keys that the component doesn't normally listen for.
 
+Note that any keyCodes you've added to `selectOnKeyCodes` will be passed to `map-keydown` as well,
+so `map-keydown` will always take precedence.
+
 **Default Handlers**
 
 ```js

From 38f291ab99a5ccba95c4f5a2f4bc0235571d0882 Mon Sep 17 00:00:00 2001
From: Jeff <sagalbot@gmail.com>
Date: Fri, 8 Nov 2019 10:56:46 -0800
Subject: [PATCH 13/20] @search instead of on-search

---
 docs/guide/upgrading.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/guide/upgrading.md b/docs/guide/upgrading.md
index e16128a..db720e2 100644
--- a/docs/guide/upgrading.md
+++ b/docs/guide/upgrading.md
@@ -69,10 +69,10 @@ has always provided the same parameters and can be used in it's place.
 <v-select @search="doSomeAjax" />
 ```
 
-### `onSearch` with null search string
+### `@search` with null search string
 
-The `onSearch` callback is now fired anytime the search string changes. In v2.x, the component
-would first check if the search string was empty, and only run the callback if it had at least one
+The `@search` event is now fired anytime the search string changes. In v2.x, the component
+would first check if the search string was empty, and only emit the event if it had at least one
 character. This was a design mistake, as it should be the consumers decision if a search should be
 run on an empty string. 
 

From 941f6187b96a1da6ff1e22521003199a11b8d2c1 Mon Sep 17 00:00:00 2001
From: Jeff <sagalbot@gmail.com>
Date: Fri, 8 Nov 2019 11:23:43 -0800
Subject: [PATCH 14/20] Closes #886

---
 src/scss/modules/_search-input.scss | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/scss/modules/_search-input.scss b/src/scss/modules/_search-input.scss
index 252b858..8616b49 100644
--- a/src/scss/modules/_search-input.scss
+++ b/src/scss/modules/_search-input.scss
@@ -3,8 +3,16 @@
 $line-height: $vs-component-line-height;
 $font-size: 1em;
 
+/**
+ * Super weird bug... If this declaration is grouped
+ * below, the cancel button will still appear in chrome.
+ * If it's up here on it's own, it'll hide it.
+ */
+.vs__search::-webkit-search-cancel-button {
+  display: none;
+}
+
 .vs__search::-webkit-search-decoration,
-.vs__search::-webkit-search-cancel-button,
 .vs__search::-webkit-search-results-button,
 .vs__search::-webkit-search-results-decoration,
 .vs__search::-ms-clear {

From 81339694b70974123b1507395c5a2e2e74b78839 Mon Sep 17 00:00:00 2001
From: Jeff <sagalbot@gmail.com>
Date: Fri, 8 Nov 2019 11:50:35 -0800
Subject: [PATCH 15/20] add bundlewatch

---
 .travis.yml  | 1 +
 package.json | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/.travis.yml b/.travis.yml
index d1959fd..2e245ec 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -6,3 +6,4 @@ node_js:
 
 script:
   - yarn test --coverage --coverageReporters=text-lcov | coveralls
+  - yarn build && bundlewatch
diff --git a/package.json b/package.json
index deefd80..19f0383 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "autoprefixer": "^9.4.7",
     "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "^8.0.5",
+    "bundlewatch": "^0.2.5",
     "chokidar": "^2.1.5",
     "coveralls": "^3.0.2",
     "cross-env": "^5.2.0",
@@ -101,5 +102,12 @@
       "html",
       "text-summary"
     ]
+  },
+  "bundlewatch": {
+    "files": [
+      {
+        "path": "dist/*"
+      }
+    ]
   }
 }

From edf36332ca887a65d49d45272cd30d48e5bfcadc Mon Sep 17 00:00:00 2001
From: Jeff <sagalbot@gmail.com>
Date: Fri, 8 Nov 2019 11:50:49 -0800
Subject: [PATCH 16/20] locked

---
 yarn.lock | 116 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 114 insertions(+), 2 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 9822a2e..e108df5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1403,6 +1403,14 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
   integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
 
+axios@^0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8"
+  integrity sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==
+  dependencies:
+    follow-redirects "1.5.10"
+    is-buffer "^2.0.2"
+
 babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -1791,12 +1799,27 @@ builtin-status-codes@^3.0.0:
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
   integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
 
+bundlewatch@^0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/bundlewatch/-/bundlewatch-0.2.5.tgz#c5fd76fb29ca2e324cf3282733fbc7be07863fc0"
+  integrity sha512-woAzcef9345Y9yC3lxkkKDZfjIbAV7jGt8Je4FL9WlkS6R3n/39v2cIfivkgN2zRDH9l88sRuWxvyvgr9U90Gg==
+  dependencies:
+    axios "^0.19.0"
+    bytes "^3.0.0"
+    chalk "^2.4.0"
+    commander "^2.15.1"
+    glob "^7.1.2"
+    gzip-size "^4.0.0"
+    jsonpack "^1.1.5"
+    lodash.merge "^4.6.1"
+    read-pkg-up "^3.0.0"
+
 bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
   integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
 
-bytes@3.1.0:
+bytes@3.1.0, bytes@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
   integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
@@ -1932,7 +1955,7 @@ center-align@^0.1.1:
     align-text "^0.1.3"
     lazy-cache "^1.0.3"
 
-chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2:
+chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -2181,6 +2204,11 @@ commander@2.9.x:
   dependencies:
     graceful-readlink ">= 1.0.0"
 
+commander@^2.15.1:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
 commander@^2.19.0, commander@^2.20.0, commander@~2.20.0:
   version "2.20.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
@@ -2683,6 +2711,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8:
   dependencies:
     ms "2.0.0"
 
+debug@=3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
 debug@^3.0.0, debug@^3.2.5, debug@^3.2.6:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
@@ -2940,6 +2975,11 @@ dot-prop@^4.1.1:
   dependencies:
     is-obj "^1.0.0"
 
+duplexer@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
+  integrity sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=
+
 duplexify@^3.4.2, duplexify@^3.6.0:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"
@@ -3402,6 +3442,13 @@ find-up@^1.0.0:
     path-exists "^2.0.0"
     pinkie-promise "^2.0.0"
 
+find-up@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
+  dependencies:
+    locate-path "^2.0.0"
+
 find-up@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
@@ -3427,6 +3474,13 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
 follow-redirects@^1.0.0:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.8.1.tgz#24804f9eaab67160b0e840c085885d606371a35b"
@@ -3684,6 +3738,14 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
   integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
 
+gzip-size@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-4.1.0.tgz#8ae096257eabe7d69c45be2b67c448124ffb517c"
+  integrity sha1-iuCWJX6r59acRb4rZ8RIEk/7UXw=
+  dependencies:
+    duplexer "^0.1.1"
+    pify "^3.0.0"
+
 handle-thing@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
@@ -4234,6 +4296,11 @@ is-buffer@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
+is-buffer@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.4.tgz#3e572f23c8411a5cfd9557c849e3665e0b290623"
+  integrity sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==
+
 is-callable@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
@@ -5031,6 +5098,11 @@ json5@^2.1.0:
   dependencies:
     minimist "^1.2.0"
 
+jsonpack@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/jsonpack/-/jsonpack-1.1.5.tgz#d42b0dcfd91ac58ef3110f96d2c599404c3dc27c"
+  integrity sha1-1CsNz9kaxY7zEQ+W0sWZQEw9wnw=
+
 jsprim@^1.2.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
@@ -5162,6 +5234,14 @@ loader-utils@^0.2.16:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
+locate-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
+  integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=
+  dependencies:
+    p-locate "^2.0.0"
+    path-exists "^3.0.0"
+
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
@@ -5180,6 +5260,11 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.merge@^4.6.1:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -6062,6 +6147,13 @@ p-is-promise@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-2.1.0.tgz#918cebaea248a62cf7ffab8e3bca8c5f882fc42e"
   integrity sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==
 
+p-limit@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
+  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
+  dependencies:
+    p-try "^1.0.0"
+
 p-limit@^2.0.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.2.1.tgz#aa07a788cc3151c939b5131f63570f0dd2009537"
@@ -6069,6 +6161,13 @@ p-limit@^2.0.0:
   dependencies:
     p-try "^2.0.0"
 
+p-locate@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
+  integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=
+  dependencies:
+    p-limit "^1.1.0"
+
 p-locate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
@@ -6093,6 +6192,11 @@ p-retry@^3.0.1:
   dependencies:
     retry "^0.12.0"
 
+p-try@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
+  integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
+
 p-try@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
@@ -6899,6 +7003,14 @@ read-pkg-up@^1.0.1:
     find-up "^1.0.0"
     read-pkg "^1.0.0"
 
+read-pkg-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
+  integrity sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^3.0.0"
+
 read-pkg-up@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-4.0.0.tgz#1b221c6088ba7799601c808f91161c66e58f8978"

From 6eb42f341588e572d3434e7e913c554c67da59f8 Mon Sep 17 00:00:00 2001
From: Jeff <sagalbot@gmail.com>
Date: Fri, 8 Nov 2019 11:54:02 -0800
Subject: [PATCH 17/20] use CLI options instead

---
 .travis.yml  | 2 +-
 package.json | 7 -------
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 2e245ec..d0f7412 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -6,4 +6,4 @@ node_js:
 
 script:
   - yarn test --coverage --coverageReporters=text-lcov | coveralls
-  - yarn build && bundlewatch
+  - yarn build && bundlewatch ./dist/*
diff --git a/package.json b/package.json
index 19f0383..beb7fd1 100644
--- a/package.json
+++ b/package.json
@@ -102,12 +102,5 @@
       "html",
       "text-summary"
     ]
-  },
-  "bundlewatch": {
-    "files": [
-      {
-        "path": "dist/*"
-      }
-    ]
   }
 }

From 1f51116ed6e89b2bc2b38dd1530df8980447819f Mon Sep 17 00:00:00 2001
From: Jeff <sagalbot@gmail.com>
Date: Fri, 8 Nov 2019 11:58:28 -0800
Subject: [PATCH 18/20] ignore map files

---
 .travis.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index d0f7412..2877477 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -6,4 +6,4 @@ node_js:
 
 script:
   - yarn test --coverage --coverageReporters=text-lcov | coveralls
-  - yarn build && bundlewatch ./dist/*
+  - yarn build && bundlewatch ./dist/!(*.map)

From ed9ea0340ccc95294191f6bfd62a8f1ff4579c04 Mon Sep 17 00:00:00 2001
From: Jeff <sagalbot@gmail.com>
Date: Fri, 8 Nov 2019 12:12:26 -0800
Subject: [PATCH 19/20] set max size

---
 .travis.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index 2877477..690e9ff 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -6,4 +6,4 @@ node_js:
 
 script:
   - yarn test --coverage --coverageReporters=text-lcov | coveralls
-  - yarn build && bundlewatch ./dist/!(*.map)
+  - yarn build && bundlewatch --max-size 20kb ./dist/!(*.map)

From cde2316e4f711f381033c3cacd7440e5b77882d9 Mon Sep 17 00:00:00 2001
From: Jeff <sagalbot@gmail.com>
Date: Sat, 9 Nov 2019 14:19:19 -0800
Subject: [PATCH 20/20] pull $emit out of create-option function

---
 src/components/Select.vue  | 17 ++++++-----------
 tests/unit/Tagging.spec.js | 14 ++++++++++++++
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index c9f5d8c..28cd342 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -296,8 +296,7 @@
                 `to generate unique key. Please provide'getOptionKey' prop ` +
                 `to return a unique key for each option.\n` +
                 'https://vue-select.org/api/props.html#getoptionkey'
-              )
-              return null
+              );
             }
           }
         }
@@ -402,14 +401,9 @@
        */
       createOption: {
         type: Function,
-        default(newOption) {
-          if (typeof this.optionList[0] === 'object') {
-            newOption = {[this.label]: newOption}
-          }
-
-          this.$emit('option:created', newOption)
-          return newOption
-        }
+        default (option) {
+          return (typeof this.optionList[0] === 'object') ? {[this.label]: option} : option;
+        },
       },
 
       /**
@@ -581,7 +575,8 @@
       select(option) {
         if (!this.isOptionSelected(option)) {
           if (this.taggable && !this.optionExists(option)) {
-            option = this.createOption(option)
+            option = this.createOption(option);
+            this.$emit('option:created', option);
           }
           if (this.multiple) {
             option = this.selectedValue.concat(option)
diff --git a/tests/unit/Tagging.spec.js b/tests/unit/Tagging.spec.js
index d7c8de8..f0e2176 100755
--- a/tests/unit/Tagging.spec.js
+++ b/tests/unit/Tagging.spec.js
@@ -80,6 +80,20 @@ describe("When Tagging Is Enabled", () => {
     expect(Select.vm.optionList).toEqual(["one", "two", "three"]);
   });
 
+  it("should pushTags even if the consumer has defined a createOption callback", () => {
+    const Select = selectWithProps({
+      pushTags: true,
+      taggable: true,
+      createOption: option => option,
+      options: ["one", "two"]
+    });
+
+    searchSubmit(Select, "three");
+
+    expect(Select.vm.pushedTags).toEqual(["three"]);
+    expect(Select.vm.optionList).toEqual(["one", "two", "three"]);
+  });
+
   it("should add a freshly created option/tag to the options list when pushTags is true and filterable is false", () => {
     const Select = selectWithProps({
       filterable: false,