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 @@ + + + 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 { : } + * @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: `{ : }`. 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 + + + +``` + +