Fixing unexpected linebreak on single selects

eriknygren · eriknygren · commit 970d1da3c2fb · 2018-04-18T13:22:11.000+01:00
What
---
- Hiding the search input field if the component is in the single value
option.
- Making the search input field full width if no options are selected in
	either single or multi select mode.
- Shrinking it to width auto if there are selected entries in multi
	mode.
Why
---
The component broke into two lines when selecting a a value in single
mode, because an empty, non-interactable input field was pushed down to
the next row if the selected entry had a long label.
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,16 @@
   .v-select.unsearchable input[type="search"]:hover {
     cursor: pointer;
   }
+  .v-select input[type="search"].hidden {
+    display: none;
+  }
+  .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 +347,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 +983,18 @@
         }
       },
 
+      /**
+       * Classes to be output on input.form-control
+       * @return {Object}
+       */
+      inputClasses() {
+        return {
+          hidden: !this.multiple && !this.isValueEmpty,
+          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,34 @@ 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 reset the search input on focus lost when clearSearchOnSelect is false', (done) => {
 			const vm = new Vue({
