React-final-form: Type error when using custom HtmlInput component.

[Dema]

What is the current behavior?

TypeScript error in /home/dema/tmp/rff-bug/src/App.tsx(36,23):
Type 'FunctionComponent<InputProps>' is not assignable to type '"input" | "select" | "textarea" | ComponentClass<FieldRenderProps<any, HTMLElement>, any> | FunctionComponent<FieldRenderProps<any, HTMLElement>> | undefined'.
  Type 'FunctionComponent<InputProps>' is not assignable to type 'FunctionComponent<FieldRenderProps<any, HTMLElement>>'.
    Types of property 'propTypes' are incompatible.
      Type 'WeakValidationMap<InputProps> | undefined' is not assignable to type 'WeakValidationMap<FieldRenderProps<any, HTMLElement>> | undefined'.
        Type 'WeakValidationMap<InputProps>' is not assignable to type 'WeakValidationMap<FieldRenderProps<any, HTMLElement>>'.
          Types of property 'input' are incompatible.
            Type 'Validator<FieldInputProps<string, HTMLInputElement>> | undefined' is not assignable to type 'Validator<FieldInputProps<any, HTMLElement>> | undefined'.
              Type 'Validator<FieldInputProps<string, HTMLInputElement>>' is not assignable to type 'Validator<FieldInputProps<any, HTMLElement>>'.
                Type 'FieldInputProps<string, HTMLInputElement>' is not assignable to type 'FieldInputProps<any, HTMLElement>'.  TS2322

    34 |     <div className="App">
    35 |       <Form onSubmit={() => { }} render={() => {
  > 36 |         return <Field component={Input} name="f"/>
       |                       ^
    37 |       }}/>
    38 |     </div>
    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

[Dema]

@ackvf Could you, please review/revert changes you made in https://github.com/final-form/react-final-form/blame/master/typescript/index.d.ts#L105? It broke types of custom fields.

[luisnoresv]

This issue still happen on the latest react final form version. It is stable on the version "react-final-form": "^6.3.0", "final-form": "^4.18.6",

[rohangakhare]

Any update on this? Its still an issue on
[email protected]
[email protected]

[ackvf]

If I revert the changes introduced in #649
as can be seen in this screenshots at the lines denoted by the debugger symbol

The code still produces the same error.
I have then added second Input Element with different type signature as suggested by the author and the error went away. Moreover, the error is not present in neither of the library versions. Therefore I can surely assume this is not an issue of the aforementioned change.

Version without #649

Version with #649

The error is

[Dema]

Yeah, my bad, I didn't check if reverting actually fixes the issue. I think I could try to pinpoint exact commit