Fix hidden input when reselecting in single mode

eriknygren · eriknygren · commit 16b6bd7d0970 · 2018-06-15T19:02:20.000+01:00
What
---
- Removing hidden class from single inputs when the dropdown is hidden.
- Changing from `display:none` to zero width when hiding the input.

Why
---
Because the user will be typing for another element if reopening the
dropdown, which we need to allow.
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -215,7 +215,8 @@
     cursor: pointer;
   }
   .v-select input[type="search"].hidden {
-    display: none;
+    width: 0px;
+    padding: 0;
   }
   .v-select input[type="search"].shrunk {
     width: auto;
@@ -989,7 +990,7 @@
        */
       inputClasses() {
         return {
-          hidden: !this.multiple && !this.isValueEmpty,
+          hidden: !this.multiple && !this.isValueEmpty && !this.dropdownOpen,
           shrunk: this.multiple && !this.isValueEmpty,
           empty: this.isValueEmpty,
         }
diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
@@ -1377,6 +1377,28 @@ describe('Select.vue', () => {
       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({
 				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
`@@ -215,7 +215,8 @@`
`215`	`215`	`cursor: pointer;`
`216`	`216`	`}`
`217`	`217`	`.v-select input[type="search"].hidden {`
`218`		`- display: none;`
	`218`	`+ width: 0px;`
	`219`	`+ padding: 0;`
`219`	`220`	`}`
`220`	`221`	`.v-select input[type="search"].shrunk {`
`221`	`222`	`width: auto;`
`@@ -989,7 +990,7 @@`
`989`	`990`	`*/`
`990`	`991`	`inputClasses() {`
`991`	`992`	`return {`
`992`		`- hidden: !this.multiple && !this.isValueEmpty,`
	`993`	`+ hidden: !this.multiple && !this.isValueEmpty && !this.dropdownOpen,`
`993`	`994`	`shrunk: this.multiple && !this.isValueEmpty,`
`994`	`995`	`empty: this.isValueEmpty,`
`995`	`996`	`}`