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

fix(listbox): allow use of arrow keys when focus is not on listbox

Browse source
This commit is contained in:
gvangeest 2023-03-07 11:03:45 +01:00 committed by gerjanvangeest
parent 3256892ce9
commit 0d4c42ab64
3 changed files with 22 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/eighty-dogs-travel.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
[listbox] allow use of arrow keys when focus is not on listbox

6
packages/ui/components/listbox/src/ListboxMixin.js
View file

@ -635,6 +635,9 @@ const ListboxMixinImplementation = superclass =>
} }
break; break;
case 'ArrowLeft': case 'ArrowLeft':
if (this._listboxReceivesNoFocus) {
return;
}
ev.preventDefault(); ev.preventDefault();
if (this.orientation === 'horizontal') { if (this.orientation === 'horizontal') {
this.activeIndex = this._getPreviousEnabledOption(this.activeIndex); this.activeIndex = this._getPreviousEnabledOption(this.activeIndex);
@ -647,6 +650,9 @@ const ListboxMixinImplementation = superclass =>
} }
break; break;
case 'ArrowRight': case 'ArrowRight':
if (this._listboxReceivesNoFocus) {
return;
}
ev.preventDefault(); ev.preventDefault();
if (this.orientation === 'horizontal') { if (this.orientation === 'horizontal') {
this.activeIndex = this._getNextEnabledOption(this.activeIndex); this.activeIndex = this._getNextEnabledOption(this.activeIndex);

16
packages/ui/components/listbox/test-suites/ListboxMixin.suite.js
View file

@ -861,6 +861,7 @@ export function runListboxMixinSuite(customConfig = {}) {
mimicKeyPress(_listboxNode, 'End'); mimicKeyPress(_listboxNode, 'End');
expect(el.activeIndex).to.equal(3); expect(el.activeIndex).to.equal(3);
}); });
it('navigates through open lists with [ArrowDown] [ArrowUp] keys activates the option', async () => { it('navigates through open lists with [ArrowDown] [ArrowUp] keys activates the option', async () => {
const el = /** @type {LionListbox} */ ( const el = /** @type {LionListbox} */ (
await fixture(html` await fixture(html`
@ -936,7 +937,7 @@ export function runListboxMixinSuite(customConfig = {}) {
it('uses [ArrowLeft] and [ArrowRight] keys when "horizontal"', async () => { it('uses [ArrowLeft] and [ArrowRight] keys when "horizontal"', async () => {
const el = /** @type {LionListbox} */ ( const el = /** @type {LionListbox} */ (
await fixture(html` await fixture(html`
<${tag} opened name="foo" orientation="horizontal" autocomplete="none" show-all-on-empty> <${tag} ._listboxReceivesNoFocus="${false}" opened name="foo" orientation="horizontal" autocomplete="none" show-all-on-empty>
<${optionTag} .choiceValue="${'Artichoke'}">Artichoke</${optionTag}> <${optionTag} .choiceValue="${'Artichoke'}">Artichoke</${optionTag}>
<${optionTag} .choiceValue="${'Chard'}">Chard</${optionTag}> <${optionTag} .choiceValue="${'Chard'}">Chard</${optionTag}>
</${tag}> </${tag}>
@ -948,15 +949,12 @@ export function runListboxMixinSuite(customConfig = {}) {
// Normalize for suite tests // Normalize for suite tests
el.activeIndex = 0; el.activeIndex = 0;
await el.updateComplete; await el.updateComplete;
mimicKeyPress(_listboxNode, 'ArrowRight'); mimicKeyPress(_listboxNode, 'ArrowRight');
expect(el.activeIndex).to.equal(1); expect(el.activeIndex).to.equal(1);
mimicKeyPress(_listboxNode, 'ArrowLeft'); mimicKeyPress(_listboxNode, 'ArrowLeft');
expect(el.activeIndex).to.equal(0); expect(el.activeIndex).to.equal(0);
// No response to vertical arrows... // No response to vertical arrows...
@ -965,7 +963,14 @@ export function runListboxMixinSuite(customConfig = {}) {
el.activeIndex = 1; el.activeIndex = 1;
mimicKeyPress(_listboxNode, 'ArrowUp'); mimicKeyPress(_listboxNode, 'ArrowUp');
expect(el.activeIndex).to.equal(1);
// @ts-ignore allow protected member access in test
el._listboxReceivesNoFocus = true;
mimicKeyPress(_listboxNode, 'ArrowLeft');
expect(el.activeIndex).to.equal(1);
mimicKeyPress(_listboxNode, 'ArrowRight');
expect(el.activeIndex).to.equal(1); expect(el.activeIndex).to.equal(1);
}); });
@ -1141,6 +1146,7 @@ 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 () => { it('navigates through list with [ArrowLeft] [ArrowRight] keys when horizontal: activates and checks the option', async () => {
/** /**
* @param {LionOption[]} options * @param {LionOption[]} options
@ -1157,7 +1163,7 @@ export function runListboxMixinSuite(customConfig = {}) {
} }
const el = /** @type {LionListbox} */ ( const el = /** @type {LionListbox} */ (
await fixture(html` await fixture(html`
<${tag} opened selection-follows-focus orientation="horizontal" autocomplete="none" show-all-on-empty> <${tag} ._listboxReceivesNoFocus="${false}" opened selection-follows-focus orientation="horizontal" autocomplete="none" show-all-on-empty>
<${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}>