From 4bd8cc83cc63b9d4efe744188405fd00d2079793 Mon Sep 17 00:00:00 2001
From: Brandon Bey <brandonbey@gmail.com>
Date: Fri, 31 Mar 2017 12:35:42 -0700
Subject: [PATCH] Adjustments based on discussion with component owner

- Moved the single class up to the root .v-select tag
- Added a searching class when there is text in the search input
- Added clearing of search text on single when clear on select is set to true,
otherwise dim the search text (for single, where clear on select is false)
---
 src/components/Select.vue | 39 +++++++++++++++++++++++++++++----------
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 13e8285..201c2ea 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -115,13 +115,17 @@
     float: left;
     line-height: 24px;
   }
-  .v-select .selected-tag.single {
+  .v-select.single .selected-tag {
     background-color: transparent;
     border-color: transparent;
   }
-  .v-select.open .selected-tag.single {
+  .v-select.single.open .selected-tag {
     position: absolute;
-    opacity: 0.5;
+    opacity: .5;
+  }
+  .v-select.single.open.searching .selected-tag,
+  .v-select.single.loading .selected-tag {
+    display: none;
   }
   .v-select .selected-tag .close {
     float: none;
@@ -139,6 +143,9 @@
     filter: alpha(opacity=20);
     opacity: .2;
   }
+  .v-select.single.searching:not(.open):not(.loading) input[type="search"] {
+    opacity: .2;
+  }
   /* Search Input */
   .v-select input[type="search"]::-webkit-search-decoration,
   .v-select input[type="search"]::-webkit-search-cancel-button,
@@ -262,7 +269,7 @@
   <div class="dropdown v-select" :class="dropdownClasses">
     <div ref="toggle" @mousedown.prevent="toggleDropdown" class="dropdown-toggle">
 
-      <span class="selected-tag" :class="selectedTagClasses" v-for="option in valueAsArray" v-bind:key="option.index">
+      <span class="selected-tag" v-for="option in valueAsArray" v-bind:key="option.index">
         {{ getOptionLabel(option) }}
         <button v-if="multiple" @click="deselect(option)" type="button" class="close">
           <span aria-hidden="true">&times;</span>
@@ -702,6 +709,9 @@
        * @return {void}
        */
       onSearchBlur() {
+        if (this.clearSearchOnBlur) {
+          this.search = ''
+        }
         this.open = false
         this.$emit('search:blur')
       },
@@ -771,6 +781,8 @@
       dropdownClasses() {
         return {
           open: this.dropdownOpen,
+          single: !this.multiple,
+          searching: this.searching,
           searchable: this.searchable,
           unsearchable: !this.searchable,
           loading: this.mutableLoading
@@ -778,13 +790,20 @@
       },
 
       /**
-       * Classes to be output on .selected-tag
-       * @return {Object}
+       * If search text should clear on blur
+       * @return {Boolean} True when single and clearSearchOnSelect
        */
-      selectedTagClasses() {
-        return {
-          single: !this.multiple
-        }
+      clearSearchOnBlur() {
+        return this.clearSearchOnSelect && !this.multiple
+      },  
+
+      /**
+       * Return the current state of the
+       * search input
+       * @return {Boolean} True if non empty value
+       */
+      searching() {
+        return !!this.search
       },
 
       /**