mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-05-17 02:29:37 +03:00
Code Activity

refactor toggleDropdown click handler (#992)

Browse Source
This commit is contained in:
Jeff Sagal
2019-11-14 11:05:05 -08:00
committed by GitHub
parent a85181b5fb
commit 1d024d6ad1
2 changed files with 53 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Select.vue
+15 -24
View File
@@ -17,7 +17,7 @@
<slot name="selected-option" v-bind="normalizeOptionForSlot(option)">
{{ getOptionLabel(option) }}
</slot>
<button v-if="multiple" :disabled="disabled" @click="deselect(option)" type="button" class="vs__deselect" aria-label="Deselect option">
<button v-if="multiple" :disabled="disabled" @click="deselect(option)" type="button" class="vs__deselect" aria-label="Deselect option" ref="deselectButtons">
<component :is="childComponents.Deselect" />
</button>
</span>
@@ -36,6 +36,7 @@
type="button"
class="vs__clear"
title="Clear selection"
ref="clearButton"
>
<component :is="childComponents.Deselect" />
</button>
@@ -652,33 +653,23 @@
* @param {Event} e
* @return {void}
*/
toggleDropdown (e) {
const target = e.target;
const toggleTargets = [
this.$el,
this.searchEl,
this.$refs.toggle,
this.$refs.actions,
this.$refs.selectedOptions,
toggleDropdown ({target}) {
// don't react to click on deselect/clear buttons,
// they dropdown state will be set in their click handlers
const ignoredButtons = [
...(this.$refs['deselectButtons'] || []),
...([this.$refs['clearButton']] || [])
];
if (typeof this.$refs.openIndicator !== 'undefined') {
toggleTargets.push(
this.$refs.openIndicator.$el,
// the line below is a bit gross, but required to support IE11 without adding polyfills
...Array.prototype.slice.call(this.$refs.openIndicator.$el.childNodes),
);
if (ignoredButtons.some(ref => ref.contains(target) || ref === target)) {
return;
}
if (toggleTargets.indexOf(target) > -1 || target.classList.contains('vs__selected')) {
if (this.open) {
this.searchEl.blur(); // dropdown will close on blur
} else {
if (!this.disabled) {
this.open = true;
this.searchEl.focus();
}
}
if (this.open) {
this.searchEl.blur();
} else if (!this.disabled) {
this.open = true;
this.searchEl.focus();
}
},
tests/unit/Slots.spec.js
+38 -21
View File
@@ -10,32 +10,49 @@ describe('Scoped Slots', () => {
},
});
expect(Select.find({ ref: 'selectedOptions' }).text()).toEqual('one')
expect(Select.find({ref: 'selectedOptions'}).text()).toEqual('one');
});
it('receives an option object to the selected-option slot', () => {
const Select = mountDefault(
{value: 'one'},
{
scopedSlots: {
'selected-option': `<span slot="selected-option" slot-scope="option">{{ option.label }}</span>`,
},
describe('Slot: selected-option', () => {
it('receives an option object to the selected-option slot', () => {
const Select = mountDefault(
{value: 'one'},
{
scopedSlots: {
'selected-option': `<span slot="selected-option" slot-scope="option">{{ option.label }}</span>`,
},
});
expect(Select.find('.vs__selected').text()).toEqual('one');
});
it('opens the dropdown when clicking an option in selected-option slot',
() => {
const Select = mountDefault(
{value: 'one'},
{
scopedSlots: {
'selected-option': `<span class="my-option" slot-scope="option">{{ option.label }}</span>`,
},
});
Select.find('.my-option').trigger('mousedown');
expect(Select.vm.open).toEqual(true);
});
expect(Select.find('.vs__selected').text()).toEqual('one')
});
it('receives an option object to the option slot in the dropdown menu', () => {
const Select = mountDefault(
{value: 'one'},
{
scopedSlots: {
'option': `<span slot="option" slot-scope="option">{{ option.label }}</span>`,
},
});
it('receives an option object to the option slot in the dropdown menu',
() => {
const Select = mountDefault(
{value: 'one'},
{
scopedSlots: {
'option': `<span slot="option" slot-scope="option">{{ option.label }}</span>`,
},
});
Select.vm.open = true;
Select.vm.open = true;
expect(Select.find({ref: 'dropdownMenu'}).text()).toEqual('onetwothree')
});
expect(Select.find({ref: 'dropdownMenu'}).text()).toEqual('onetwothree');
});
});