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

fix(select-rich): readonly works with keyboard interaction (#2235)

Browse source
This commit is contained in:
Wessam Zaghloul 2024-04-03 10:26:21 +02:00 committed by GitHub
parent f6b3f43a03
commit d2edadd3b0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 21 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/fifty-shrimps-float.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': minor
---
[select-rich] fix readonly keyboard interaction

2
packages/ui/components/select-rich/src/LionSelectRich.js
View file

@ -477,7 +477,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
*/
// TODO: rename to _onKeyUp in v1
__onKeyUp(ev) {
if (this.disabled) {
if (this.disabled || this.readOnly) {
return;
}

15
packages/ui/components/select-rich/test/lion-select-rich.test.js
View file

@ -316,6 +316,21 @@ describe('lion-select-rich', () => {
expect(elSingleoption.opened).to.be.false;
});
it('stays closed with [ArrowUp] or [ArrowDown] key in readonly mode', async () => {
const elReadOnly = await fixture(html`
<lion-select-rich readonly>
<lion-option .choiceValue=${10}>Item 1</lion-option>
<lion-option .choiceValue=${20} checked>Item 2</lion-option>
</lion-select-rich>
`);
elReadOnly.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
expect(elReadOnly.opened).to.be.false;
elReadOnly.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
expect(elReadOnly.opened).to.be.false;
});
it('sets inheritsReferenceWidth to min by default', async () => {
const el = await fixture(html`
<lion-select-rich name="favoriteColor" label="Favorite color">