From 16b6bd7d09708b8637125571e46d28031478f83c Mon Sep 17 00:00:00 2001
From: Erik Nygren <erik.nygren6@gmail.com>
Date: Fri, 15 Jun 2018 18:58:05 +0100
Subject: [PATCH] Fix hidden input when reselecting in single mode

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.
---
 src/components/Select.vue      |  5 +++--
 test/unit/specs/Select.spec.js | 22 ++++++++++++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index e8710f6..056c321 100644
--- 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
index e2d152d..348382f 100644
--- 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>',