React-final-form: Issue on TypeScript `FieldRenderProps` typings

[bwlt]

https://github.com/final-form/react-final-form/blob/a3ca5f169da5cb5abcf53d60285d8d43b08c427f/typescript/index.d.ts#L25

This typing does not work well with other react libraries.

For example with rc-select: http://react-component.github.io/select/#select-props
in the onChange prop you don't have access to the event, but only the value selected.

This is valid also for onFocus and onBlur props

[Chrisdo82]

+1

cannot upgrade to 4.1.0 because of this.

[Chrisdo82]

I got it working:
onChange={(value: string) => input.onChange({ target: { value} } as React.ChangeEvent<HTMLInputElement>)}

[bwlt]

@Chrisdo82 ok, It Is a temporary patch, but according on how this library work It should accept a plain value.
On the other side It should be very very nice if that value can be typed with a type argument instead of the an ambiguous any

[francoislg]

Since onChange should work with a simple value, I workaround-ed it with onChange={(value: string) => (input as any).onChange(value)

[bcnichols3]

This might be a tangential issue, but I'm seeing Form's component prop demands a component whose props are defined as FieldRenderProps, which does not allow additional keys. This means that I'm only allowed props on my custom field components that are defined by React Final Form, which means they can't be very custom at all. I can get around this with using children instead but does that feel a little hacky?

[lookfirst]

Extending what @bcnichols3 said above, I'm trying to wrap MUI, using typescript. As you can see in the screenshot, I want to pass label as a property, but I cannot. =(

<MuiPickersUtilsProvider utils={DateFnsUtils}>
    <Field
        name='date'
        label='Date'
        onChange={(event: any) => {
                    ...
        }} 
                value={...}
        component={DatePicker}
    />
</MuiPickersUtilsProvider>

export function DatePicker(props: FieldRenderProps<KeyboardDatePickerProps, HTMLInputElement>) {
    debugger;
    const {input: {name, onChange, value, label, ...restInput}, meta, ...rest} = props;
    const showError = ((meta.submitError && !meta.dirtySinceLastSubmit) || meta.error) && meta.touched;

    return (
        <KeyboardDatePicker
            {...rest}
            disableToolbar
            helperText={showError ? meta.error || meta.submitError : undefined}
            error={showError}
            variant="inline"
            format="MM/dd/yyyy"
            margin="normal"
            id="date"
            name={name}
            onChange={onChange}
            value={value}
            label={label}
            KeyboardButtonProps={{
                'aria-label': label,
            }}
            inputProps={restInput as any}
        />
    );
}