Event fallback to native events

[drewbitt]

What package has an issue

@svelteuidev/core

A clear and concise description of what the bug is

<Button
...props
on:keydown={(event) => {
  if (event.key === 'Enter') {
    handleButtonClick();
  }
}}

will not work as svelteui is forcing CustomEvent on the event, which does not have .key. It should be a KeyboardEvent. Events should be falling back to native. Keydown for example is important in accessibility.

Currently you can mitigate this via

const castKeyboardEvent = <T = KeyboardEvent>(event: any): T => event;
...

<Button
...props
on:keydown={(event) => {
  if (castKeyboardEvent(event).key === 'Enter') {
    handleButtonClick();
  }
}}

This was not newly introduced in 0.9

In which browser(s) did the problem occur?

No response

Steps To Reproduce

1. Use svelteui component like Box
2. Use on:keydown
3. Change Box to div and see that it works

Do you know how to fix the issue

Yes

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Relevant Assets

No response

[BeeMargarida]

Thank you, that is a valid problem. I identified this problem when developing the solution for the typings of the component props. I was gonna tackle this next, still thinking of a good approach that does not involve listing all the possible DOM events in the component type file.

From what I read, all events from a component are assumed to be custom events by the compiler. I'm thinking of using the the DOMAttributes class from svelte/elements, but I'm not sure it will work. If anyone has any idea, I would greatly appreciate

[drewbitt]

still thinking of a good approach that does not involve listing all the possible DOM events in the component type file

This is still a decent alternative in the interim. Of course not all, but several popular options. We can compile a list probably of what they would be.