TypeError in JSX.MenuHTMLAttributes

[samuelhulla]

Describe the bug

There seems to be an issue with typing HTMLMenuElement.

consider this standard type:

import type { JSX } from 'solid-js'
type Props = JSX.MenuHTMLAttributes<HTMLMenuElement>

and the standard component definition

export function Menu(props: Props) {
  return (
     <menu {...props}>
        example
     </menu>
  )
}

This however yields the following error:

Type '{ children: Element; class: string; label?: string | undefined; type?: "context" | "toolbar" | undefined; accessKey?: string | undefined; contenteditable?: boolean | "plaintext-only" | "inherit" | undefined; ... 275 more ...; onwheel?: EventHandlerUnion<...> | undefined; }' is not assignable to type 'MenuHTMLAttributes<HTMLElement>'. Types of property 'onCopy' are incompatible. Type 'EventHandlerUnion<HTMLMenuElement, ClipboardEvent> | undefined' is not assignable to type 'EventHandlerUnion<HTMLElement, ClipboardEvent> | undefined'. Type 'EventHandler<HTMLMenuElement, ClipboardEvent>' is not assignable to type 'EventHandlerUnion<HTMLElement, ClipboardEvent> | undefined'. Type 'EventHandler<HTMLMenuElement, ClipboardEvent>' is not assignable to type 'EventHandler<HTMLElement, ClipboardEvent>'. Property 'compact' is missing in type 'HTMLElement' but required in type 'HTMLMenuElement'.

Your Example Website or App

https://stackblitz.com/edit/solidjs-templates-nvy1bp?file=src%2FApp.tsx

Steps to Reproduce the Bug or Issue

1. Create the prop types as above
2. Create the menu elements as above
3. See the Typescript error

Expected behavior

This definition should work without raising any type errors

Screenshots or Videos

No response

Platform

• Typescript: 5.4.5
• Solid 1.8.19

(But this bug goes a way back, because the stackblitz is solid-js: 1.7.6 and typescript: 5.1.3 and it still raises a type error)

Additional context

This seems to be some weird mismatch between the EventHandlerUnion type and the default HTMLMenuElement attributes.

Allso note using the exported definition for HTMLElementTags, which locally re-exports the HTMLAttributes definitions inside the solid's JSX interface works.

type Props = JSX.HTMLElementTags['menu'] // ✅ this works

This however has me confused if the MenuHTMLAttributes is supposed to be some other type just unfortunately named or wether there's some underlying issue here. But least the official docs would leave me to believe that components should re-export their <Component>HTMLAttributes type