mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-22 10:30:34 +03:00
Code Activity

Merge pull request #436 from sagalbot/feature/dont-deselect-when-clicking-selected-options

Browse Source 
dont deselect when clicking selected options
This commit is contained in:
Jeff
2018-01-23 09:01:45 -08:00
committed by GitHub
parent 843f39d5bc b3a551c836
commit e35e2ac100
3 changed files with 55 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dev/dev.html
+47 -47
View File
@@ -7,7 +7,7 @@
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet">--> <!--<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet">-->
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css" rel="stylesheet">--> <!--<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css" rel="stylesheet">-->
<!--<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-alpha.6/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 {
@@ -30,53 +30,53 @@
<body> <body>
<div id="app"> <div id="app">
<v-select placeholder="default" :options="options"></v-select> <v-select placeholder="default" :options="options"></v-select>
<!--<v-select placeholder="default, RTL" :options="options" dir="rtl"></v-select>--> <v-select placeholder="default, RTL" :options="options" dir="rtl"></v-select>
<!--<v-select placeholder="default, options=[1,5,10]" :options="[1,5,10]"></v-select>--> <v-select placeholder="default, options=[1,5,10]" :options="[1,5,10]"></v-select>
<!--<v-select placeholder="multiple" multiple :options="options"></v-select>--> <v-select placeholder="multiple" multiple :options="options"></v-select>
<!--<v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>--> <v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
<!--<v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>--> <v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
<!--<v-select placeholder="multiple, closeOnSelect=true" multiple :options="['cat', 'dog', 'bear']"></v-select>--> <v-select placeholder="multiple, closeOnSelect=true" multiple :options="['cat', 'dog', 'bear']"></v-select>
<!--<v-select placeholder="multiple, closeOnSelect=false" multiple :close-on-select="false" :options="['cat', 'dog', 'bear']"></v-select>--> <v-select placeholder="multiple, closeOnSelect=false" multiple :close-on-select="false" :options="['cat', 'dog', 'bear']"></v-select>
<!--<v-select placeholder="searchable=false" :options="options" :searchable="false"></v-select>--> <v-select placeholder="searchable=false" :options="options" :searchable="false"></v-select>
<!--<v-select placeholder="search github.." label="full_name" @search="search" :options="ajaxRes"></v-select>--> <v-select placeholder="search github.." label="full_name" @search="search" :options="ajaxRes"></v-select>
<!--<v-select placeholder="custom option template" :options="options" multiple>--> <v-select placeholder="custom option template" :options="options" multiple>
<!--<template slot="selected-option" slot-scope="option">--> <template slot="selected-option" slot-scope="option">
<!--{{option.label}}--> {{option.label}}
<!--</template>--> </template>
<!--<template slot="option" slot-scope="option">--> <template slot="option" slot-scope="option">
<!--{{option.label}} ({{option.value}})--> {{option.label}} ({{option.value}})
<!--</template>--> </template>
<!--</v-select>--> </v-select>
<!--<v-select placeholder="custom option template for string array" taggable :options="['cat', 'dog', 'bear']" multiple>--> <v-select placeholder="custom option template for string array" taggable :options="['cat', 'dog', 'bear']" multiple>
<!--<template slot="selected-option" slot-scope="option">--> <template slot="selected-option" slot-scope="option">
<!--{{option.label}}--> {{option.label}}
<!--</template>--> </template>
<!--<template slot="option" slot-scope="option">--> <template slot="option" slot-scope="option">
<!--{{option.label}}--> {{option.label}}
<!--</template>--> </template>
<!--</v-select>--> </v-select>
<!--<v-select multiple placeholder="custom label template" :options="options">--> <v-select multiple placeholder="custom label template" :options="options">
<!--<span--> <span
<!--slot="selected-option-container"--> slot="selected-option-container"
<!--slot-scope="props"--> slot-scope="props"
<!--class="selected-tag"--> class="selected-tag"
<!--&gt;--> >
<!--{{ props.option.label }} ({{ props.option.value }})--> {{ props.option.label }} ({{ props.option.value }})
<!--<button v-if="props.multiple" @click="props.deselect(props.option)" type="button" class="close" aria-label="Remove option">--> <button v-if="props.multiple" @click="props.deselect(props.option)" type="button" class="close" aria-label="Remove option">
<!--<span aria-hidden="true">&times;</span>--> <span aria-hidden="true">&times;</span>
<!--</button>--> </button>
<!--</span>--> </span>
<!--</v-select>--> </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>
<!--<v-select placeholder="filtering with fuse.js" label="title" :options="fuseSearchOptions" :filter="fuseSearch">--> <v-select placeholder="filtering with fuse.js" label="title" :options="fuseSearchOptions" :filter="fuseSearch">
<!--<template slot="option" scope="option">--> <template slot="option" scope="option">
<!--<strong>{{ option.title }}</strong><br>--> <strong>{{ option.title }}</strong><br>
<!--<em>{{ `${option.author.firstName} ${option.author.lastName}` }}</em>--> <em>{{ `${option.author.firstName} ${option.author.lastName}` }}</em>
<!--</template>--> </template>
<!--</v-select>--> </v-select>
</div> </div>
</body> </body>
src/components/Select.vue
+4 -6
View File
@@ -759,9 +759,7 @@
* @return {void} * @return {void}
*/ */
select(option) { select(option) {
if (this.isOptionSelected(option)) { if (!this.isOptionSelected(option)) {
this.deselect(option)
} else {
if (this.taggable && !this.optionExists(option)) { if (this.taggable && !this.optionExists(option)) {
option = this.createOption(option) option = this.createOption(option)
} }
@@ -802,9 +800,9 @@
* Clears the currently selected value(s) * Clears the currently selected value(s)
* @return {void} * @return {void}
*/ */
clearSelection() { clearSelection() {
this.mutableValue = this.multiple ? [] : null this.mutableValue = this.multiple ? [] : null
}, },
/** /**
* Called from this.select after each selection. * Called from this.select after each selection.
test/unit/specs/Select.spec.js
+4 -4
View File
@@ -117,7 +117,7 @@ describe('Select.vue', () => {
options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}] options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
} }
}).$mount() }).$mount()
vm.$children[0].select({label: 'This is Foo', value: 'foo'}) vm.$children[0].deselect({label: 'This is Foo', value: 'foo'})
expect(vm.$children[0].mutableValue.length).toEqual(1) expect(vm.$children[0].mutableValue.length).toEqual(1)
}) })
@@ -129,7 +129,7 @@ describe('Select.vue', () => {
options: ['foo','bar'] options: ['foo','bar']
} }
}).$mount() }).$mount()
vm.$children[0].select('foo') vm.$children[0].deselect('foo')
expect(vm.$children[0].mutableValue.length).toEqual(1) expect(vm.$children[0].mutableValue.length).toEqual(1)
}), }),
@@ -1090,7 +1090,7 @@ describe('Select.vue', () => {
vm.$refs.select.search = 'one' vm.$refs.select.search = 'one'
searchSubmit(vm) searchSubmit(vm)
Vue.nextTick(() => { Vue.nextTick(() => {
expect(vm.$refs.select.mutableValue).toEqual([]) expect(vm.$refs.select.mutableValue).toEqual(['one'])
expect(vm.$refs.select.search).toEqual('') expect(vm.$refs.select.search).toEqual('')
done() done()
}) })
@@ -1109,7 +1109,7 @@ describe('Select.vue', () => {
vm.$refs.select.search = 'one' vm.$refs.select.search = 'one'
searchSubmit(vm) searchSubmit(vm)
Vue.nextTick(() => { Vue.nextTick(() => {
expect(vm.$refs.select.mutableValue).toEqual([]) expect(vm.$refs.select.mutableValue).toEqual(['one'])
expect(vm.$refs.select.search).toEqual('') expect(vm.$refs.select.search).toEqual('')
done() done()
}) })