final-form / final-form/react-final-form
Type error when using custom HtmlInput component.
- Dominant language
- JavaScript
- Stars
- 7.4k
- Forks
- 497
- PR merge metrics
- No merged PRs in 30d
Description
### What is the current behavior?
```
TypeScript error in /home/dema/tmp/rff-bug/src/App.tsx(36,23):
Type 'FunctionComponent' is not assignable to type '"input" | "select" | "textarea" | ComponentClass, any> | FunctionComponent> | undefined'.
Type 'FunctionComponent' is not assignable to type 'FunctionComponent>'.
Types of property 'propTypes' are incompatible.
Type 'WeakValidationMap | undefined' is not assignable to type 'WeakValidationMap> | undefined'.
Type 'WeakValidationMap' is not assignable to type 'WeakValidationMap>'.
Types of property 'input' are incompatible.
Type 'Validator> | undefined' is not assignable to type 'Validator> | undefined'.
Type 'Validator>' is not assignable to type 'Validator>'.
Type 'FieldInputProps' is not assignable to type 'FieldInputProps'. TS2322
34 |
35 | { }} render={() => {
> 36 | return
| ^
37 | }}/>
38 |
39 | );
```
### What is the expected behavior?
No type errors. This worked in 6.3.0.
### Sandbox Link
https://github.com/Dema/rff-bug
### Other information
I think the issue is with a limited type inference that bails out too early.
Here https://github.com/final-form/react-final-form/blame/master/typescript/index.d.ts#L96
`T extends HTMLElement = HTMLElement` `= HTMLElement` default value forces typescript to give up on trying to infer real type that is `HTMLInputElement`
Contributor guide
Assessment
This issue has not been assessed yet.