ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(listbox): using selection-follows-focus with horizontal orientation

Browse source
This commit is contained in:
Mathieu Puech 2020-12-02 00:17:44 -05:00
parent 0f41bf20c2
commit 55fd115e47
2 changed files with 41 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/listbox/src/ListboxMixin.js
View file

@ -547,7 +547,7 @@ const ListboxMixinImplementation = superclass =>
/* no default */ /* no default */
} }
const keys = ['ArrowUp', 'ArrowDown', 'Home', 'End']; const keys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End'];
if (keys.includes(key) && this.selectionFollowsFocus && !this.multipleChoice) { if (keys.includes(key) && this.selectionFollowsFocus && !this.multipleChoice) {
this.setCheckedIndex(this.activeIndex); this.setCheckedIndex(this.activeIndex);
} }

41
packages/listbox/test-suites/ListboxMixin.suite.js
View file

@ -912,7 +912,7 @@ export function runListboxMixinSuite(customConfig = {}) {
}); });
} }
const el = /** @type {LionListbox} */ (await fixture(html` const el = /** @type {LionListbox} */ (await fixture(html`
<${tag} opened selection-follows-focus autocomplete="none"> <${tag} opened selection-follows-focus orientation="horizontal" autocomplete="none">
<${optionTag} .choiceValue=${10}>Item 1</${optionTag}> <${optionTag} .choiceValue=${10}>Item 1</${optionTag}>
<${optionTag} .choiceValue=${20}>Item 2</${optionTag}> <${optionTag} .choiceValue=${20}>Item 2</${optionTag}>
<${optionTag} .choiceValue=${30}>Item 3</${optionTag}> <${optionTag} .choiceValue=${30}>Item 3</${optionTag}>
@ -936,6 +936,45 @@ export function runListboxMixinSuite(customConfig = {}) {
expect(el.checkedIndex).to.equal(0); expect(el.checkedIndex).to.equal(0);
expectOnlyGivenOneOptionToBeChecked(options, 0); expectOnlyGivenOneOptionToBeChecked(options, 0);
}); });
it('navigates through list with [ArrowLeft] [ArrowRight] keys when horizontal: activates and checks the option', async () => {
/**
* @param {LionOption[]} options
* @param {number} selectedIndex
*/
function expectOnlyGivenOneOptionToBeChecked(options, selectedIndex) {
options.forEach((option, i) => {
if (i === selectedIndex) {
expect(option.checked).to.be.true;
} else {
expect(option.checked).to.be.false;
}
});
}
const el = /** @type {LionListbox} */ (await fixture(html`
<${tag} opened selection-follows-focus autocomplete="none">
<${optionTag} .choiceValue=${10}>Item 1</${optionTag}>
<${optionTag} .choiceValue=${20}>Item 2</${optionTag}>
<${optionTag} .choiceValue=${30}>Item 3</${optionTag}>
</${tag}>
`));
const { listbox } = getProtectedMembers(el);
const options = el.formElements;
// Normalize start values between listbox, slect and combobox and test interaction below
el.activeIndex = 0;
el.checkedIndex = 0;
expect(el.activeIndex).to.equal(0);
expect(el.checkedIndex).to.equal(0);
expectOnlyGivenOneOptionToBeChecked(options, 0);
listbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
expect(el.activeIndex).to.equal(1);
expect(el.checkedIndex).to.equal(1);
expectOnlyGivenOneOptionToBeChecked(options, 1);
listbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
expect(el.activeIndex).to.equal(0);
expect(el.checkedIndex).to.equal(0);
expectOnlyGivenOneOptionToBeChecked(options, 0);
});
it('checks first and last option with [Home] and [End] keys', async () => { it('checks first and last option with [Home] and [End] keys', async () => {
const el = await fixture(html` const el = await fixture(html`
<${tag} opened selection-follows-focus> <${tag} opened selection-follows-focus>