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 @@
@@ -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`;
+ }
+ },
+ }),
},
};
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 { : }
- * @param vm {Vue/Component} Vue Select instance
+ * @param map {Object} Mapped keyCode to handlers { : }
+ * @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: `{ : }`. 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
-
-
-
+// tab
+9: e => this.onTab()
-
+// 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
+
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,