mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-07 07:12:23 +03:00
Merge branch 'kball-add-select-on-tab-option'
# Conflicts: # src/components/Select.vue
This commit is contained in:
+2
-2
@@ -9,7 +9,7 @@
|
||||
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
|
||||
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">-->
|
||||
<style>
|
||||
|
||||
|
||||
#app {
|
||||
height: 95vh;
|
||||
display: flex;
|
||||
@@ -67,7 +67,7 @@
|
||||
</button>
|
||||
</span>
|
||||
</v-select>
|
||||
|
||||
<v-select placeholder="select on tab" :select-on-tab="true" :options="options"></v-select>
|
||||
<v-select placeholder="disabled" disabled value="disabled"></v-select>
|
||||
<v-select placeholder="disabled multiple" disabled multiple :value="['disabled', 'multiple']"></v-select>
|
||||
<v-select placeholder="filterable=false, @search=searchPeople" label="first_name" :filterable="false" @search="searchPeople" :options="people"></v-select>
|
||||
|
||||
@@ -339,6 +339,7 @@
|
||||
@keydown.up.prevent="typeAheadUp"
|
||||
@keydown.down.prevent="typeAheadDown"
|
||||
@keydown.enter.prevent="typeAheadSelect"
|
||||
@keydown.tab="onTab"
|
||||
@blur="onSearchBlur"
|
||||
@focus="onSearchFocus"
|
||||
type="search"
|
||||
@@ -578,6 +579,18 @@
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Select the current value if selectOnTab is enabled
|
||||
*/
|
||||
onTab: {
|
||||
type: Function,
|
||||
default: function () {
|
||||
if (this.selectOnTab) {
|
||||
this.typeAheadSelect();
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Enable/disable creating options from searchInput.
|
||||
* @type {Boolean}
|
||||
@@ -710,6 +723,14 @@
|
||||
type: String,
|
||||
default: 'auto'
|
||||
},
|
||||
/**
|
||||
* When true, hitting the 'tab' key will select the current select value
|
||||
* @type {Boolean}
|
||||
*/
|
||||
selectOnTab: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
|
||||
@@ -109,6 +109,22 @@ describe('Select.vue', () => {
|
||||
expect(vm.$children[0].mutableValue).toEqual(vm.value)
|
||||
})
|
||||
|
||||
it('can select an option on tab', (done) => {
|
||||
const vm = new Vue({
|
||||
template: `<div><v-select :options="['one','two']" select-on-tab></v-select></div>`,
|
||||
components: {vSelect},
|
||||
}).$mount()
|
||||
|
||||
vm.$children[0].typeAheadPointer = 0
|
||||
|
||||
trigger(vm.$children[0].$refs.search, 'keydown', (e) => e.keyCode = 9)
|
||||
|
||||
Vue.nextTick(() => {
|
||||
expect(vm.$children[0].mutableValue).toEqual('one');
|
||||
done();
|
||||
})
|
||||
})
|
||||
|
||||
it('can deselect a pre-selected object', () => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select :options="options" :value="value" :multiple="true"></v-select></div>',
|
||||
|
||||
Reference in New Issue
Block a user