WIP

- pull toggleTargets out of `toggleDropdown(e)` and into it's own computed property
- add focus, blur to options slots

docs/.vuepress/components/BooksWithSlots.vue

@@ -1,7 +1,7 @@
 <template>
-  <v-select :options="books" label="title">
+  <v-select :options="books" label="title" multiple>
-    <template #selected-option="{author, title}">
+    <template #selected-option="{author, title, focus}">
-      <component :is="option" v-bind="{author, title}"/>
+      <component :is="option" v-bind="{author, title}" @click="focus"/>
     </template>
     <template #option="{author, title}">
       <component :is="option" v-bind="{author, title}"/>

src/components/Select.vue

@@ -557,22 +557,7 @@
        * @return {void}
        */
       toggleDropdown (e) {
-        const target = e.target;
+        if (this.toggleTargets.indexOf(e.target) > -1 || e.target.classList.contains('vs__selected')) {
-        const toggleTargets = [
-          this.$el,
-          this.searchEl,
-          this.$refs.toggle.$el,
-        ];
-
-        if (typeof this.$refs.openIndicator !== 'undefined') {
-          toggleTargets.push(
-            this.$refs.openIndicator.$el,
-            // the line below is a bit gross, but required to support IE11 without adding polyfills
-            ...Array.prototype.slice.call(this.$refs.openIndicator.$el.childNodes),
-          );
-        }
-
-        if (toggleTargets.indexOf(target) > -1 || target.classList.contains('vs__selected')) {
           if (this.open) {
             this.searchEl.blur(); // dropdown will close on blur
           } else {
@@ -686,7 +671,12 @@
        * @return {*}
        */
       normalizeOptionForSlot (option) {
-        return (typeof option === 'object') ? option : {[this.label]: option};
+        const normalized = (typeof option === 'object') ? option : {[this.label]: option};
+        return {
+          ...normalized,
+          focus: this.onSearchFocus,
+          blur: this.onSearchBlur,
+        };
       },
 
       /**
@@ -720,20 +710,20 @@
        * @emits  {search:blur}
        * @return {void}
        */
-      onSearchBlur() {
+      onSearchBlur () {
         if (this.mousedown && !this.searching) {
-          this.mousedown = false
+          this.mousedown = false;
         } else {
           if (this.clearSearchOnBlur) {
-            this.search = ''
+            this.search = '';
           }
-          this.closeSearchOptions()
+          this.closeSearchOptions();
-          return
+          return;
         }
         // Fixed bug where no-options message could not be closed
-        if (this.search.length === 0 && this.options.length === 0){
+        if (this.search.length === 0 && this.options.length === 0) {
-          this.closeSearchOptions()
+          this.closeSearchOptions();
-          return
+          return;
         }
       },
 
@@ -742,9 +732,9 @@
        * @emits  {search:focus}
        * @return {void}
        */
-      onSearchFocus() {
+      onSearchFocus () {
-        this.open = true
+        this.open = true;
-        this.$emit('search:focus')
+        this.$emit('search:focus');
       },
 
       /**
@@ -851,6 +841,24 @@
         return this.options.concat(this.pushedTags);
       },
 
+      toggleTargets () {
+        const toggleTargets = [
+          this.$el,
+          this.searchEl,
+          this.$refs.toggle,
+        ];
+
+        if (typeof this.$refs.openIndicator !== 'undefined') {
+          toggleTargets.push(
+            this.$refs.openIndicator.$el,
+            // the line below is a bit gross, but required to support IE11 without adding polyfills
+            ...Array.prototype.slice.call(this.$refs.openIndicator.$el.childNodes),
+          );
+        }
+
+        return toggleTargets;
+      },
+
       /**
        * Find the search input DOM element.
        * @returns {HTMLInputElement}