solid: Solid JSX HTMLElement types do not allow `on:event` props
Describe the bug
When using the on:event syntax on HTML elements in JSX in TypeScript the props are considered invalid:
<div on:click={() => null} />
(JSX attribute) on:click: () => null
Type '{ "on:click": () => null; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
Property 'on:click' does not exist on type 'HTMLAttributes<HTMLDivElement>'. Did you mean 'onclick'?ts(2322)
Expected behavior
The behaviour of on:[event] handlers should be typed correctly. I’ve tried extending the HTMLElement interface to allow this, but I’m stuck with being unable to correctly:
interface HTMLElement {
[prop: `on:${keyof HTMLElementEventMap}`]: <
T extends keyof HTMLElementEventMap
>(
ev: HTMLElementEventMap[T]
) => void;
}
Unfortunately, the error with this type seems to suggest that I’d have to write out each individual on:${event} JSX handler, unless someone can suggest how to create a mapped type from the keys presented above. Before I attempt that, would this type extension belong in solidjs or dom-expressions?
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Comments: 20 (9 by maintainers)
Commits related to this issue
- Support remove handle for values. Display a handle on multi values that can be clicked to remove the entry from the values list of a multiple select. Note: due to use of non-delegated event listener... — committed to thisbeyond/solid-select by martinpengellyphillips 2 years ago
- fix(store): fix traversed returning duplicate values Fixes #804 — committed to otonashixav/solid by otonashixav 2 years ago
If you mean delegated events, they bubble but do so with custom bubbling that happens when the original event has already bubbled up to the document.