React Final Form callbacks are incompatible with date components

[vvasin]

The event callbacks from the FieldInputProps of React Final Form library are supposed to work with event targets of HTMLElement subtypes. By default all the date components expect event callbacks with targets of Element subtypes, which is more general. Therefore, we can't use the input callbacks out of box like this:

<Field ...>
    {({input}) => (
        <DatePicker onFocus={input.onFocus} ... />
    )}
</Field>

We have to wrap the callbacks instead:

const handleFocus = useCallback<Required<DatePickerProps>['onFocus']>(
    (event) => {
        if (event.target instanceof HTMLElement) {
            input.onFocus(event as React.FocusEvent<HTMLElement>);
        }
    },
    [onBlur],
);

It seems unnecessary, since the date components are supposed to work using HTML elements, I believe.

[ValeraS]

fixed in #54