Merge pull request sagalbot#512 from eriknygren/fix-unexpected-wrapping-on-single-select

sagalbot · web-flow · commit a0c8efe0e580 · 2018-07-19T08:57:28.000-07:00
Fixing unexpected linebreak on single selects
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -73,6 +73,7 @@
     padding: 0;
     background: none;
     border: 1px solid rgba(60, 60, 60, .26);
+    min-height: 36px;
     border-radius: 4px;
     white-space: normal;
   }
@@ -213,6 +214,17 @@
   .v-select.unsearchable input[type="search"]:hover {
     cursor: pointer;
   }
+  .v-select input[type="search"].hidden {
+    width: 0px;
+    padding: 0;
+  }
+  .v-select input[type="search"].shrunk {
+    width: auto;
+  }
+  .v-select input[type="search"].empty {
+    width: 100%;
+  }
+
     /* List Items */
   .v-select li {
     line-height: 1.42857143; /* Normalize line height */
@@ -336,12 +348,12 @@
               @focus="onSearchFocus"
               type="search"
               class="form-control"
+              :class="inputClasses"
               autocomplete="off"
               :disabled="disabled"
               :placeholder="searchPlaceholder"
               :tabindex="tabindex"
               :readonly="!searchable"
-              :style="{ width: isValueEmpty ? '100%' : 'auto' }"
               :id="inputId"
               aria-label="Search for option"
       >
@@ -972,6 +984,18 @@
         }
       },
 
+      /**
+       * Classes to be output on input.form-control
+       * @return {Object}
+       */
+      inputClasses() {
+        return {
+          hidden: !this.multiple && !this.isValueEmpty && !this.dropdownOpen,
+          shrunk: this.multiple && !this.isValueEmpty,
+          empty: this.isValueEmpty,
+        }
+      },
+
       /**
        * 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
@@ -249,6 +249,36 @@ 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({
@@ -1318,7 +1348,56 @@ describe('Select.vue', () => {
 				expect(vm.$refs.select.search).toEqual('')
 				done()
 			})
-		})
+    })
+
+    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>',
+        data: {
+          value: 'one',
+          options: ['one', 'two', 'three']
+        }
+      }).$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>',
+        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)
+          expect(vm.$children[0].inputClasses.empty).toEqual(false)
+          expect(vm.$children[0].inputClasses.shrunk).toEqual(false)
+          done()
+        })
+      })
+    })
 
 		it ('should not reset the search input on focus lost when clearSearchOnSelect is false', (done) => {
 			const vm = new Vue({
