shoelace-style / shoelace

A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME 👇👇👇
https://webawesome.com
MIT License
12.67k stars 804 forks source link

sl-select throws exception if a sl-input in the same form receives a new value with autofill in MS Edge #2117

Open tomcatmwi opened 1 month ago

tomcatmwi commented 1 month ago

Describe the bug

A console error message appears in some cases when a sl-input receives an autofill value.

To Reproduce

  1. Create a form with at least one sl-input and sl-select element.
  2. Upload the HTML document on a web server. Autofill doesn't work on local files.
  3. Open the page in Microsoft Edge, fill it and submit it. After submission, Edge will remember the values you entered.
  4. Refresh the page, fill the form again, but now use the autofill to enter the same value in the sl-input as earlier.
  5. You will get a console error:
TypeError: Cannot read properties of undefined (reading 'length')
    at SlSelect.handleDocumentKeyDown (chunk.IMHWGJEP.js:178:21)
    at SlSelect.handleComboboxKeyDown (chunk.IMHWGJEP.js:282:10)
    at EventPart.handleEvent (lit-html.ts:2068:29)

It appears that the autofill triggers sl-keydown, but Edge sends undefined instead of a valid keydown event.

It also appears to randomly occur or not occur, depending on the web server. The demo page I published on GitHub Pages doesn't trigger it. If I host the same HTML document on our intranet server, running IIS, then it's triggered. I believe this is due to how Autofill works.

Demo

https://tomcatmwi.github.io/sl-select-bug-demo

Screenshots

https://ibb.co/fC0NR62 sl-bug

Browser / OS

Additional information

Here is a simple reproduction:

<html>
<meta charset="utf8" />
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.1/cdn/themes/light.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.1/cdn/shoelace-autoloader.js"></script>

</head>
<body>

<form name="someform" submit="e => { e.preventDefault(); }">

<div>
  <sl-input name="somevalue" label="Some value:" />
</div>

<div>
<sl-select name="trouble" value="1" label="I will cause trouble!" />
  <sl-option value="1">Option 1</sl-option>
  <sl-option value="2">Option 2</sl-option>
  <sl-option value="3">Option 3</sl-option>
</sl-select>
</div>

<div>
  <sl-button type="submit">Submit</sl-button>
  <sl-button type="reset">Reset</sl-button>
</div>

</form>

</body>
</html>
chriskrj commented 2 weeks ago

Do you still notice this issue in Edge: Version 128.0.2739.54 ? Cant reproduce it in my version.