mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-22 10:30:34 +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 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">-->
|
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">-->
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
height: 95vh;
|
height: 95vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -67,7 +67,7 @@
|
|||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
</v-select>
|
</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" disabled value="disabled"></v-select>
|
||||||
<v-select placeholder="disabled multiple" disabled multiple :value="['disabled', 'multiple']"></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>
|
<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.up.prevent="typeAheadUp"
|
||||||
@keydown.down.prevent="typeAheadDown"
|
@keydown.down.prevent="typeAheadDown"
|
||||||
@keydown.enter.prevent="typeAheadSelect"
|
@keydown.enter.prevent="typeAheadSelect"
|
||||||
|
@keydown.tab="onTab"
|
||||||
@blur="onSearchBlur"
|
@blur="onSearchBlur"
|
||||||
@focus="onSearchFocus"
|
@focus="onSearchFocus"
|
||||||
type="search"
|
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.
|
* Enable/disable creating options from searchInput.
|
||||||
* @type {Boolean}
|
* @type {Boolean}
|
||||||
@@ -710,6 +723,14 @@
|
|||||||
type: String,
|
type: String,
|
||||||
default: 'auto'
|
default: 'auto'
|
||||||
},
|
},
|
||||||
|
/**
|
||||||
|
* When true, hitting the 'tab' key will select the current select value
|
||||||
|
* @type {Boolean}
|
||||||
|
*/
|
||||||
|
selectOnTab: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
|
|||||||
@@ -109,6 +109,22 @@ describe('Select.vue', () => {
|
|||||||
expect(vm.$children[0].mutableValue).toEqual(vm.value)
|
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', () => {
|
it('can deselect a pre-selected object', () => {
|
||||||
const vm = new Vue({
|
const vm = new Vue({
|
||||||
template: '<div><v-select :options="options" :value="value" :multiple="true"></v-select></div>',
|
template: '<div><v-select :options="options" :value="value" :multiple="true"></v-select></div>',
|
||||||
|
|||||||
Reference in New Issue
Block a user