Inputs automatically submit the form upon Enter, no way to opt out

[jaredcwhite]

Normally there's a way to add event handling for standard HTML inputs to cancel the event when the Enter key is pressed, so as to avoid submitting the form or otherwise handle the event manually.

It doesn't appear sl-input has that ability. It handles the underlying input within the shadow DOM and triggers a form submit immediately, bypassing any user-level event handling.

The particular line where this occurs:

shoelace/src/components/input/input.ts

Line 279 in 79306e0

this.formSubmitController.submit();

[jaredcwhite]

I figured out a workaround — if you use event capturing and call stopPropagation() it'll cancel the event down in the shadow DOM.

form.querySelector("sl-input").addEventListener("keydown", event => {
  if (event.key === 'Enter') event.stopPropagation()
}, true)

Feel free to close if you think that's sufficient.

[claviska]

There was no way to cancel the keydown event because the binding happens in the component. Wrapping the submit logic in setTimeout() will wait a cycle, which is enough time for other listeners to cancel the event if needed. For good measure, I also added a test to prevent regressions.

[jaredcwhite]

Cool, thanks for digging into that!