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 = '';
}
},