TypeScript: react-number-format native `<input />` types mismatch React's `InputHTMLProps<HTMLInputElement>`

[zachgoll]

Describe the issue and the actual behavior

There seems to be a mismatch between react-number-format native input types and React's InputHTMLProps<HTMLInputElement>

When "spreading" the props to NumberFormat, the following type mismatches occur:

• value - Error: Type 'readonly string[]' is not assignable to type 'string | number | null | undefined'
• defaultValue- Error: Type 'readonly string[]' is not assignable to type 'string | number | null | undefined'
• type - Error: Type '"number"' is not assignable to type '"text" | "password" | "tel" | undefined'

This can be worked around by explicitly casting the types:

Describe the expected behavior

I would expect that "spreading" InputHTMLProps<HTMLInputElement> to NumericFormat or PatternFormat would not cause any type errors. I suppose an argument could be made that type should be different given this library is specific to numbers, but I'm not seeing any reason why value and defaultValue should not match React's typings?

Provide a CodeSandbox link illustrating the issue

https://codesandbox.io/s/react-number-format-issues-726-3pvjt7

Provide steps to reproduce this issue

See CodeSandbox above.

Please check the browsers where the issue is seen

Not applicable. Type error.

[fzhukov]

same problem

[fatihtanrivverdi]

same problem

[JavierLopezSCG]

same problem x3 combo

[sherman89]

+1 from me. This issue prevented us from using this library in our existing large codebase.