Bug/629 show selected value (sagalbot#631)

sagalbot · web-flow · commit 3024f1348096 · 2018-09-06T08:15:55.000-07:00
* Show current selection before searching

* remove 'hidden' input class
remove left border on input, adjust padding

* Set 0 width for search input
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -79,6 +79,7 @@
     flex-grow: 1;
     flex-wrap: wrap;
     padding: 0 2px;
+    position: relative;
   }
   .v-select .vs__actions {
     display: flex;
@@ -145,13 +146,17 @@
     line-height: 1.42857143; /* Normalize line height */
     margin: 4px 2px 0px 2px;
     padding: 0 0.25em;
+    transition: opacity .25s;
   }
   .v-select.single .selected-tag {
     background-color: transparent;
     border-color: transparent;
   }
-  .v-select.single.open .selected-tag,
-  .v-select.single.loading .selected-tag {
+  .v-select.single.open .selected-tag {
+    position: absolute;
+    opacity: .4;
+  }
+  .v-select.single.searching .selected-tag {
     display: none;
   }
   .v-select .selected-tag .close {
@@ -191,34 +196,22 @@
     font-size: 1em;
     display: inline-block;
     border: 1px solid transparent;
+    border-left: none;
     outline: none;
     margin: 4px 0 0 0;
-    padding: 0 0.5em;
+    padding: 0 7px;
     max-width: 100%;
     background: none;
     box-shadow: none;
-
-    /* `flex-grow` will stretch the input to take all remaining space, but We
-       need to ensure a small amount of space so there's room to type input. We'll
-       set the input to "hidden" (via width: 0) when the dropdown is closed, to
-       prevent adding a "blank" line (see: https://github.com/sagalbot/vue-select/pull/512).
-       In that case, the flex-grow will still stretch the input to take any
-       available space, on the same "line."
-    */
     flex-grow: 1;
-    width: 4em;
+    width: 0;
   }
   .v-select.unsearchable input[type="search"] {
     opacity: 0;
   }
   .v-select.unsearchable input[type="search"]:hover {
     cursor: pointer;
   }
-  .v-select input[type="search"].hidden {
-    border: none;
-    padding: 0;
-    width: 0;
-  }
 
   /* List Items */
   .v-select li {
@@ -343,7 +336,6 @@
                 @focus="onSearchFocus"
                 type="search"
                 class="form-control"
-                :class="inputClasses"
                 autocomplete="off"
                 :disabled="disabled"
                 :placeholder="searchPlaceholder"
@@ -1074,16 +1066,6 @@
         }
       },
 
-      /**
-       * Classes to be output on input.form-control
-       * @return {Object}
-       */
-      inputClasses() {
-        return {
-          hidden: !this.isValueEmpty && !this.dropdownOpen && !this.mutableLoading
-        }
-      },
-
       /**
        * If search text should clear on blur
        * @return {Boolean} True when single and clearSearchOnSelect
diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
@@ -1591,55 +1591,6 @@ describe('Select.vue', () => {
 			})
     })
 
-    it('should apply the "hidden" class to the search input when a value is present', () => {
-      const vm = new Vue({
-        template: '<div><v-select ref="select" :options="options" :value="value"></v-select></div>',
-        data: {
-          value: 'one',
-          options: ['one', 'two', 'three']
-        }
-      }).$mount()
-
-      expect(vm.$children[0].inputClasses.hidden).toEqual(true)
-    })
-
-    it('should not apply the "hidden" class to the search input when a value is present, and the dropdown is open', (done) => {
-      const vm = new Vue({
-        template: '<div><v-select ref="select" :options="options" :value="value"></v-select></div>',
-        data: {
-          value: 'one',
-          options: ['one', 'two', 'three'],
-          open: true
-        }
-      }).$mount()
-      vm.$children[0].toggleDropdown({target: vm.$children[0].$refs.search})
-      Vue.nextTick(() => {
-        Vue.nextTick(() => {
-          expect(vm.$children[0].open).toEqual(true)
-          expect(vm.$children[0].inputClasses.hidden).toEqual(false)
-          done()
-        })
-      })
-    })
-
-    it('should not apply the "hidden" class to the search input when a value is present, the dropdown is closed, and options are loading', (done) => {
-      const vm = new Vue({
-        template: '<div><v-select ref="select" :options="options" :value="value"></v-select></div>',
-        data: {
-          value: 'one',
-          options: ['one', 'two', 'three'],
-          open: true
-        }
-      }).$mount()
-      vm.$refs.select.toggleLoading(true)
-      Vue.nextTick(() => {
-        Vue.nextTick(() => {
-          expect(vm.$children[0].inputClasses.hidden).toEqual(false)
-          done()
-        })
-      })
-    })
-
 		it ('should not reset the search input on focus lost when clearSearchOnSelect is false', (done) => {
 			const vm = new Vue({
 				template: '<div><v-select ref="select" :options="options" :value="value" :clear-search-on-select="false"></v-select></div>',
