The Select component cannot be used in TypeScript applications [Workaround Found]

[nemethmik]

Type error: Type 'FunctionComponent<FormHelperTextWrapperProps>' is not assignable to type 'string | ComponentClass<FieldRenderProps, any> | FunctionComponent<FieldRenderProps> | undefined'. Type 'FunctionComponent<FormHelperTextWrapperProps>' is not assignable to type 'FunctionComponent<FieldRenderProps>'. Types of parameters 'props' and 'props' are incompatible. Type 'FieldRenderProps & { children?: ReactNode; }' is not assignable to type 'FormHelperTextWrapperProps & { children?: ReactNode; }'. Type 'FieldRenderProps & { children?: ReactNode; }' is missing the following properties from type 'FormHelperTextWrapperProps': label, formControlProps TS2322 141 | <div> 142 | <label>City </label> 143 | <Field name="city" label="Select city" component={FFMUI.Select}> Up arrow pointing to the word component: 144 | <MenuItem value="London">London </MenuItem> 145 | <MenuItem value="Paris">Paris </MenuItem> 146 | </Field>

I've just found an easy workaround: type-cast the Select to any when assigned to the component prop: component={FFMUI.Select as any}

[karianpour]

I have a similar probelm :

TypeScript error: Type 'FunctionComponent<FormHelperTextWrapperProps>' is not assignable to type 'string | ComponentClass<FieldRenderProps<any>, any> | FunctionComponent<FieldRenderProps<any>> | undefined'.
  Type 'FunctionComponent<FormHelperTextWrapperProps>' is not assignable to type 'FunctionComponent<FieldRenderProps<any>>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'PropsWithChildren<FieldRenderProps<any>>' is not assignable to type 'PropsWithChildren<FormHelperTextWrapperProps>'.
        Type 'FieldRenderProps<any> & { children?: ReactNode; }' is missing the following properties from type 'FormHelperTextWrapperProps': label, formControlProps  TS2322

    191 |                     fullWidth
    192 |                     name="city"
  > 193 |                     component={Select}
        |                     ^
    194 |                     label="Select a City"
    195 |                     formControlProps={{ fullWidth: true }}
    196 |                   >

package versions :

"react": "^16.8.4",
"@material-ui/core": "^3.9.2",
"final-form": "^4.12.0",
"typescript": "3.3.3333"
"react-final-form": "^4.1.0",
"final-form-material-ui": "^0.3.0",

alt the workaround above worked for me as well component={Select as any}

I tried to fix the problem. I changed the Select.d.ts file as follow and the error is gone,

-interface FormHelperTextWrapperProps extends FieldRenderProps {
+interface FormHelperTextWrapperProps<T extends HTMLElement> extends FieldRenderProps<T> {

So tried to check if it is ok in the original file. I did the same in Select.tsx file and it gave me a new error, but there is same as the other files like TextField.tsx already has :

In TextField.tsx:
(alias) interface FieldRenderProps<T extends HTMLElement>
import FieldRenderProps
Generic type 'FieldRenderProps<T>' requires 1 type argument(s).ts(2314)

In edited Select.tsx
interface FormHelperTextWrapperProps<T extends HTMLElement>
Generic type 'FormHelperTextWrapperProps<T>' requires 1 type argument(s).ts(2314)

[nikonov91-dev]

Seems to be the Author doesnt want to add the solution to the project :(

[lookfirst]

Seems to be the Author doesnt want to add the solution to the project :(

@nikonov91-dev https://github.com/lookfirst/mui-rff