2
0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-07 07:12:23 +03:00

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.
This commit is contained in:
Erik Nygren
2018-06-15 18:58:05 +01:00
parent 970d1da3c2
commit 16b6bd7d09
2 changed files with 25 additions and 2 deletions
+3 -2
View File
@@ -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,
}
+22
View File
@@ -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>',