How to pass an input ref to rac's TextField?

[rostero1]

What's the right way to pass an input ref to react-aria-component's TextField?

Using this example, should I create a forwardRef for MyTextField and pass the ref to Input? I see that TextField also takes a ref, but it seems to go on the div.

function MyTextField(
  { label, description, errorMessage, ...props }: MyTextFieldProps
) {
  return (
    <TextField {...props}>
      <Label>{label}</Label>
      <Input />
      {description && <Text slot="description">{description}</Text>}
      {errorMessage && <Text slot="errorMessage">{errorMessage}</Text>}
    </TextField>
  );
}

In case someone was wondering what for: react-hook-form needs to pass a ref so it can call ref.focus() when an error exists on submit.

[devongovett]

Yeah I think the right way is to pass a ref directly to the Input element. You could do that using forwardRef, or by adding an inputRef prop to your component for example.

[rostero1]

@devongovett one more... do you happen to know the best place to put this for the Select component?

[devongovett]

I guess the Button? For example if your use case for the ref is to call .focus() on it that would make sense. But really depends what you're trying to do.

[rostero1]

Thanks. That makes sense.