Do not hide input while loading options. (sagalbot#621)

stevenharman · sagalbot · commit 92628635145b · 2018-09-05T07:23:36.000-07:00
Adding the `.hidden` class to the input while loading would cause it to
lose padding. This would cause the text to "jump" back and forth.
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -1080,7 +1080,7 @@
        */
       inputClasses() {
         return {
-          hidden: !this.isValueEmpty && !this.dropdownOpen
+          hidden: !this.isValueEmpty && !this.dropdownOpen && !this.mutableLoading
         }
       },
 
diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
@@ -1603,7 +1603,6 @@ describe('Select.vue', () => {
       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>',
@@ -1623,6 +1622,24 @@ describe('Select.vue', () => {
       })
     })
 
+    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>',

Original file line number	Diff line number	Diff line change
`@@ -1080,7 +1080,7 @@`
`1080`	`1080`	`*/`
`1081`	`1081`	`inputClasses() {`
`1082`	`1082`	`return {`
`1083`		`- hidden: !this.isValueEmpty && !this.dropdownOpen`
	`1083`	`+ hidden: !this.isValueEmpty && !this.dropdownOpen && !this.mutableLoading`
`1084`	`1084`	`}`
`1085`	`1085`	`},`
`1086`	`1086`