Define prop types for HTML elements e.g. <input>

[techieshark]

I want to be able to describe a component, let's call it CustomInput, which just wraps an HTML <input>, providing it with some pre-set attribute values.

I'd like to say that the Props of CustomInput are the set of props expected by the DOM's <input>, plus a couple custom values.

Currently either this isn't possible, or I've missed the docs after reading through Flow docs.

I would expect something like this would be possible:

/** Props expected by HTML <input>.
 * @see https://github.com/facebook/flow/blob/422f13bee662472f9d44742edf1cee68b7caee15/lib/dom.js#L3239
 */
type InputHTMLAttributes = React.ElementConfig<typeof HTMLInputElement>;


export type TextFieldProps = {
  customProp: string,
} & InputHTMLAttributes;

The error flow (0.90) gives is:

`HTMLInputElement` [1] is incompatible with `React.Component` [2].

   CustomInput.js:9:48
      9│ type InputHTMLAttributes = React.ElementConfig<typeof HTMLInputElement>;
                                                        ^^^^^^^^^^^^^^^^^^^^^^^

References:
   /private/tmp/flow/flowlib_27edb8b7/dom.js:3051:15
   3051│ declare class HTMLInputElement extends HTMLElement {
                       ^^^^^^^^^^^^^^^^ [1]
   /private/tmp/flow/flowlib_27edb8b7/react.js:26:15
     26│ declare class React$Component<Props, State = void> {
                       ^^^^^^^^^^^^^^^ [2]

Missing/Incorrect APIs

DOM

For example, <input> class is defined here:

flow/lib/dom.js

Line 3239 in 422f13b

declare class HTMLInputElement extends HTMLElement {

Relevant documentation

If there's a way to do the above using just the HTMLInputElement that'd be great, but otherwise perhaps DOM.js could include the props as their own type? For comparison/info, that appears to be what is available in TypeScript:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/d8748201c7bfc38d70269af3bcaa3a5c380547af/types/react/index.d.ts#L1943

There's also an unanswered question about how to do this on Stack Overflow.

[goodmind]

#7569

[gajus]

@goodmind Is there an update on this?

[gajus]

CC @samwgoldman @mroch

This is one of the bigger issues that we are facing daily.

[danielo515]

Any workaround at least? what are we supposed to use useRef for if we can target dom node elements?

[romanlex]

does anyone remember this issue?

[pascalduez]

As a temporary (or not so temporary) solution, there's now Flow Typed envs (here the jsx env).
https://flow-typed.github.io/flow-typed/#/env-definitions

[sekoyo]

So there's no TS equivalent of React.HTMLAttributes/SVGAttributes/HTMLInputAttributes<HTMLXElement> etc? :(

[gkz]

So there's no TS equivalent of React.HTMLAttributes/SVGAttributes/HTMLInputAttributes<HTMLXElement> etc? :(

Typing these HTML intrinsics is on our TODO list - we've had internal requests for this as well