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.