Adjustments based on discussion with component owner

fidgetwidget · fidgetwidget · commit 4bd8cc83cc63 · 2017-03-31T12:35:42.000-07:00
- 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)
diff --git 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,20 +781,29 @@
       dropdownClasses() {
         return {
           open: this.dropdownOpen,
+          single: !this.multiple,
+          searching: this.searching,
           searchable: this.searchable,
           unsearchable: !this.searchable,
           loading: this.mutableLoading
         }
       },
 
       /**
-       * 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
       },
 
       /**
