Using react-aria-components with react-hook-form and event handlers

[lloydjatkinson]

Hi,

I'm trying to use the react-aria-components text field with react-hook form. Unfortunately I have a type error and I'm not sure how to resolve it.

This is my text field wrapper:

import clsx from 'clsx';
import { forwardRef } from 'react';
import {
    Input,
    Label,
    TextField as ReactAriaTextField,
    type TextFieldProps as ReactAriaTextFieldProps,
    Text,
} from 'react-aria-components';

type TextFieldProps = Omit<
    ReactAriaTextFieldProps & {
        label?: string;
        description?: string;
        errorMessage?: string;
    },
    'className'
>;

export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
    (
        {
            label,
            description,
            errorMessage,
            isDisabled,
            validationState,
            ...props
        },
        forwardedRef
    ) => {    
        return (
            <ReactAriaTextField {...props}>
                <div className="flex flex-col gap-2">
                    <Label className={labelVariants}>{label}</Label>
                    <Input
                        className={inputVariants}
                        readOnly={isDisabled}
                        disabled={isDisabled}
                        ref={forwardedRef}
                    />
                </div>
                {errorMessage && (
                    <Text className={errorMessageVariants} slot="errorMessage">
                        {errorMessage}
                    </Text>
                )}
            </ReactAriaTextField>
        );
    }
);

Which I am then using like this in my form:

export const SomeForm= () => {
    const {
        register,
        handleSubmit,
        watch,
        formState: { errors },
    } = useForm<Inputs>();
    const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input defaultValue="test" {...register('example')} />

            <TextField
                label="Name"
                {...register('exampleRequired')} />

            <input type="submit" />
        </form>
    );
};

Which results in the following error:

Type '{ onChange: ChangeHandler; onBlur: ChangeHandler; ref: RefCallBack; name: "exampleRequired"; min?: string | number | undefined; max?: string | number | undefined; ... 5 more ...; label: string; }' is not assignable to type 'TextFieldProps'.
  Types of property 'onChange' are incompatible.
    Type 'ChangeHandler' is not assignable to type '(value: string) => void'.
      Types of parameters 'event' and 'value' are incompatible.
        Type 'string' is not assignable to type '{ target: any; type?: any; }'.ts(2322)

I only have some vague ideas how to resolve this. I suspect it's because react-hook-form expects an event type whereas react-aria-components uses a plain string for the onChange.

How should I best solve this?
Thanks

[lloydjatkinson]

I am not able to create a good reproduction in either codesandbox or stackblitz as they seem unable to find the react-aria-components typings.

[lloydjatkinson]

One way to "solve" this is to default to a react-hook-form controller which is really meant for when dealing with a component that doesn't forward refs - except that my component is. This works but feels like a lot of extra code - it would be great if the change handlers didn't require this.

            <Controller
                name="exampleRequired"
                control={control}
                rules={{ required: { value: true, message: 'This is a required value' } }}
                render={({ field }) =>
                    <TextField
                        {...field}
                        validationState={errors.exampleRequired ? 'invalid' : 'valid'}
                        errorMessage={errors.exampleRequired?.message} />} />

[snowystinger]

Hey! Thanks for the issue.
I think if you set up your codesandbox like this, and import the type separately, then it will resolve just fine
https://codesandbox.io/s/flamboyant-williamson-xfcnml?file=/src/TextfieldWrapper.tsx

I think the other thing to note about RHF in use with a third party library, such as ours, is that all our inputs are controlled. So you'll want to use the methods described here https://www.react-hook-form.com/advanced-usage/#ControlledmixedwithUncontrolledComponents which should allow you to set your own onChange. I know it may not seem like our components are controlled because you can use them in an uncontrolled way, but all that means is that we control them for you.

Hope that helps, otherwise, feel free to edit the codesandbox to show the problem and we'll be happy to look further into it.