diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index d8d80e0..4ab8bb4 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -114,12 +114,13 @@ module.exports = { ], }, { - title: 'Digging Deeper', + title: 'Functionality', collapsable: false, children: [ ['guide/validation', 'Validation'], ['guide/vuex', 'Vuex'], ['guide/ajax', 'AJAX'], + ['guide/tagging', 'Tagging'], ], }, { diff --git a/docs/guide/tagging.md b/docs/guide/tagging.md new file mode 100644 index 0000000..291b6be --- /dev/null +++ b/docs/guide/tagging.md @@ -0,0 +1,93 @@ +## Taggable Select + +To allow input that's not present within the options, set the `taggable` prop to true. + +```html + +``` + + + +#### Hiding the Dropdown Menu + +You may want to hide the dropdown when creating taggable selects. This is a nice UX pattern if +you're *only* going to be adding new options, and have nothing existing to choose from. In this case +the dropdown isn't that helpful, so you can hide it with `no-drop`. + +```html + +``` + + + +#### Keeping Focus While Tagging + +By default, Vue Select will lose focus after an option is selected. If you think your users will be +adding multiple tags, you may wish to keep the input focused after a tag has been added. + +```html + +``` + + + +#### Tag with Tab Key + +You can also set up the component to select on Tab keydown. If there's no text in the input, the +browser will tab to the next form input. + +```html + +``` + + + +#### + +If you want added tags to be pushed to the options array, set `push-tags` to true. + +```html + +``` + + + +## Using `taggable` with `reduce` + +When combining `taggable` with `reduce`, you must define the `createOption` prop. The +`createOption` function is responsible for defining the structure of the objects that Vue Select +will create for you when adding a tag. It should return a value that has the same properties as the +rest of your `options`. + +If you don't define `createOption`, Vue Select will construct a simple object following this structure: +`{[this.label]: searchText}`. If you're using `reduce`, this is probably not what your options look +like, which is why you'll need to set the function yourself. + +**Example** + +We have a taggable select for adding books to a collection. We're just concerned about getting the +book title added, and our server side code will add the author details in a background process. The +user has already selected a book. + +```js +const options = [ + { + title: "HTML5", + author: { + firstName: "Remy", + lastName: "Sharp" + } + } +]; +``` + +```html + +``` diff --git a/docs/guide/values.md b/docs/guide/values.md index 46907e4..df79eef 100644 --- a/docs/guide/values.md +++ b/docs/guide/values.md @@ -113,64 +113,3 @@ is true, `v-model` and `value` must be an array. ``` - -## Tagging - -To allow input that's not present within the options, set the `taggable` prop to true. - -```html - -``` - - - -If you want added tags to be pushed to the options array, set `push-tags` to true. - -```html - -``` - - - -### Using `taggable` & `reduce` together - -When combining `taggable` with `reduce`, you must define the `createOption` prop. The -`createOption` function is responsible for defining the structure of the objects that Vue Select -will create for you when adding a tag. It should return a value that has the same properties as the -rest of your `options`. - -If you don't define `createOption`, Vue Select will construct a simple object following this structure: -`{[this.label]: searchText}`. If you're using `reduce`, this is probably not what your options look -like, which is why you'll need to set the function yourself. - -**Example** - -We have a taggable select for adding books to a collection. We're just concerned about getting the -book title added, and our server side code will add the author details in a background process. The -user has already selected a book. - -```js -const options = [ - { - title: "HTML5", - author: { - firstName: "Remy", - lastName: "Sharp" - } - } -]; -``` - -```html - -``` - - - diff --git a/src/components/Select.vue b/src/components/Select.vue index f2aba4e..713b6e5 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -587,13 +587,14 @@ * @return {void} */ onAfterSelect(option) { - if (this.closeOnSelect) { - this.open = !this.open - this.searchEl.blur() + const shouldClose = !this.taggable && !this.multiple; + if (this.closeOnSelect && shouldClose) { + this.open = !this.open; + this.searchEl.blur(); } if (this.clearSearchOnSelect) { - this.search = '' + this.search = ''; } },