From 7c66f755797d98e513b859bc7a933146f7193080 Mon Sep 17 00:00:00 2001 From: Jeff Date: Fri, 25 Oct 2019 13:59:23 -0700 Subject: [PATCH 01/11] 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 Date: Fri, 25 Oct 2019 18:07:45 -0700 Subject: [PATCH 02/11] 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 @@ @@ -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, + }; + }, + }, }; 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 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 Date: Fri, 25 Oct 2019 18:47:33 -0700 Subject: [PATCH 03/11] 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 @@ + + + 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 + + + +``` + + From 8d9905c3dce26734f679f71fdd98efaf0a0f32b7 Mon Sep 17 00:00:00 2001 From: Jeff Date: Fri, 25 Oct 2019 18:48:46 -0700 Subject: [PATCH 04/11] 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 Date: Thu, 7 Nov 2019 12:40:43 -0800 Subject: [PATCH 05/11] 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 @@ @@ -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, - }; - }, - }, }; 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 Date: Thu, 7 Nov 2019 14:08:37 -0800 Subject: [PATCH 06/11] 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 Date: Thu, 7 Nov 2019 14:10:10 -0800 Subject: [PATCH 07/11] 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 Date: Thu, 7 Nov 2019 15:45:12 -0800 Subject: [PATCH 08/11] 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 Date: Thu, 7 Nov 2019 17:15:48 -0800 Subject: [PATCH 09/11] 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 @@ @@ -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, From a87cb3317e82655f85c83545d8f46b393b7f8d92 Mon Sep 17 00:00:00 2001 From: Jeff Date: Fri, 8 Nov 2019 10:43:36 -0800 Subject: [PATCH 10/11] 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 @@ + 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 +`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 + + + +<<< @/.vuepress/components/TagOnComma.vue - -## `mapKeyDown` +## mapKeyDown 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`. + + <<< @/.vuepress/components/CustomHandlers.vue - From 1e6b0e98d093ca9ce972b118762da148a89e25ae Mon Sep 17 00:00:00 2001 From: Jeff Date: Fri, 8 Nov 2019 10:50:36 -0800 Subject: [PATCH 11/11] 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: @@ -29,6 +29,9 @@ 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. +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