mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-22 10:30:34 +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:
@@ -215,7 +215,8 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.v-select input[type="search"].hidden {
|
.v-select input[type="search"].hidden {
|
||||||
display: none;
|
width: 0px;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
.v-select input[type="search"].shrunk {
|
.v-select input[type="search"].shrunk {
|
||||||
width: auto;
|
width: auto;
|
||||||
@@ -989,7 +990,7 @@
|
|||||||
*/
|
*/
|
||||||
inputClasses() {
|
inputClasses() {
|
||||||
return {
|
return {
|
||||||
hidden: !this.multiple && !this.isValueEmpty,
|
hidden: !this.multiple && !this.isValueEmpty && !this.dropdownOpen,
|
||||||
shrunk: this.multiple && !this.isValueEmpty,
|
shrunk: this.multiple && !this.isValueEmpty,
|
||||||
empty: this.isValueEmpty,
|
empty: this.isValueEmpty,
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1377,6 +1377,28 @@ describe('Select.vue', () => {
|
|||||||
expect(vm.$children[0].inputClasses.shrunk).toEqual(false)
|
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) => {
|
it ('should not reset the search input on focus lost when clearSearchOnSelect is false', (done) => {
|
||||||
const vm = new Vue({
|
const vm = new Vue({
|
||||||
template: '<div><v-select ref="select" :options="options" :value="value" :clear-search-on-select="false"></v-select></div>',
|
template: '<div><v-select ref="select" :options="options" :value="value" :clear-search-on-select="false"></v-select></div>',
|
||||||
|
|||||||
Reference in New Issue
Block a user