js/shoelace
1
0
Fork 0
mirror of https://github.com/shoelace-style/shoelace.git synced 2026-01-12 02:59:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Issue 2117: Fix sl-select throws exception if a sl-input in the same form receives a new value with autofill in MS Edge (#2221)

Browse Source 
* Issue 2117: Created a test to reproduce the issue

Note: Test is currently fainling before the actual fix

* Issue 2117: Check for the existenc of the key

* Bug is caused by an incorrect event triggered by Edge
* The event is missing the key property
* To fix the bug, check for the existence of the property
before checking the length property

* Issue 2117: Reset delay in test

---------

Co-authored-by: Dominikus Hellgartner <dominikus.hellgartner@gmail.com>
This commit is contained in:
dhellgartner
2024-10-24 22:22:47 +02:00
committed by GitHub
parent e89cbc7c03
commit bb7e840fac
2 changed files with 24 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/select/select.component.ts
View File

@@ -373,7 +373,7 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
}
// All other "printable" keys trigger type to select
if (event.key.length === 1 || event.key === 'Backspace') {
if ((event.key && event.key.length === 1) || event.key === 'Backspace') {
const allOptions = this.getAllOptions();
// Don't block important key combos like CMD+R

23
src/components/select/select.test.ts
View File

@@ -206,6 +206,29 @@ describe('<sl-select>', () => {
expect(handler).to.be.calledTwice;
});
// this can happen in on ms-edge autofilling an associated input element in the same form
// https://github.com/shoelace-style/shoelace/issues/2117
it('should not throw on incomplete events', async () => {
const el = await fixture<SlSelect>(html`
<sl-select required>
<sl-option value="option-1">Option 1</sl-option>
</sl-select>
`);
const event = new KeyboardEvent('keydown');
Object.defineProperty(event, 'target', { writable: false, value: el });
Object.defineProperty(event, 'key', { writable: false, value: undefined });
/**
* If Edge does autofill, it creates a broken KeyboardEvent
* which is missing the key value.
* Using the normal dispatch mechanism does not allow to do this
* Thus passing the event directly to the private method for testing
*
* @ts-expect-error */
el.handleDocumentKeyDown(event);
});
});
it('should open the listbox when any letter key is pressed with sl-select is on focus', async () => {