Rely on flexbox adjusting input size

stevenharman · stevenharman · commit 3ef668e078ab · 2018-07-19T15:25:52.000-04:00
Except when "hidden", when we want it to to make it invisible, but still
focusable.
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -224,17 +224,12 @@
     cursor: pointer;
   }
   .v-select input[type="search"].hidden {
-    width: 0px;
+    height: 0;
     padding: 0;
-  }
-  .v-select input[type="search"].shrunk {
-    width: auto;
-  }
-  .v-select input[type="search"].empty {
-    width: 100%;
+    width: 0;
   }
 
-    /* List Items */
+  /* List Items */
   .v-select li {
     line-height: 1.42857143; /* Normalize line height */
   }
@@ -1002,9 +997,7 @@
        */
       inputClasses() {
         return {
-          hidden: !this.multiple && !this.isValueEmpty && !this.dropdownOpen,
-          shrunk: this.multiple && !this.isValueEmpty,
-          empty: this.isValueEmpty,
+          hidden: !this.isValueEmpty && !this.dropdownOpen
         }
       },
 
diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
@@ -249,36 +249,6 @@ describe('Select.vue', () => {
 			expect(vm.$children[0].isOptionSelected('foo')).toEqual(true)
 		}),
 
-    it('applies the "empty" class to the search input when no value is selected', () => {
-      const vm = new Vue({
-        template: '<div><v-select :options="options" multiple v-model="value"></v-select></div>',
-        components: {vSelect},
-        data: {
-          value: null,
-          options: [{label: 'one'}]
-        }
-      }).$mount()
-
-      expect(vm.$children[0].inputClasses.empty).toEqual(true)
-      expect(vm.$children[0].inputClasses.shrunk).toEqual(false)
-      expect(vm.$children[0].inputClasses.hidden).toEqual(false)
-    }),
-
-    it('applies the "shrunk" class to the search input when one or more value is selected', () => {
-      const vm = new Vue({
-        template: '<div><v-select :options="options" multiple v-model="value"></v-select></div>',
-        components: {vSelect},
-        data: {
-          value: [{label: 'one'}],
-          options: [{label: 'one'}]
-        }
-      }).$mount()
-
-      expect(vm.$children[0].inputClasses.shrunk).toEqual(true)
-      expect(vm.$children[0].inputClasses.empty).toEqual(false)
-      expect(vm.$children[0].inputClasses.hidden).toEqual(false)
-    }),
-
 		describe('change Event', () => {
 			it('will trigger the input event when the selection changes', (done) => {
 				const vm = new Vue({
@@ -1350,19 +1320,6 @@ describe('Select.vue', () => {
 			})
     })
 
-    it('should apply the "empty" class to the search input when it does not have a selected value', () => {
-      const vm = new Vue({
-        template: '<div><v-select ref="select" :options="options" :value="value"></v-select></div>',
-        data: {
-          value: '',
-          options: ['one', 'two', 'three']
-        }
-      }).$mount()
-      expect(vm.$children[0].inputClasses.empty).toEqual(true)
-      expect(vm.$children[0].inputClasses.shrunk).toEqual(false)
-      expect(vm.$children[0].inputClasses.hidden).toEqual(false)
-    })
-
     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>',
@@ -1373,11 +1330,8 @@ describe('Select.vue', () => {
       }).$mount()
 
       expect(vm.$children[0].inputClasses.hidden).toEqual(true)
-      expect(vm.$children[0].inputClasses.empty).toEqual(false)
-      expect(vm.$children[0].inputClasses.shrunk).toEqual(false)
     })
 
-
     it('should not apply the "hidden" class to the search input when a value is present, and the dropdown is open', () => {
       const vm = new Vue({
         template: '<div><v-select ref="select" :options="options" :value="value"></v-select></div>',
@@ -1392,8 +1346,6 @@ describe('Select.vue', () => {
         Vue.nextTick(() => {
           expect(vm.$children[0].open).toEqual(true)
           expect(vm.$children[0].inputClasses.hidden).toEqual(false)
-          expect(vm.$children[0].inputClasses.empty).toEqual(false)
-          expect(vm.$children[0].inputClasses.shrunk).toEqual(false)
           done()
         })
       })
