@react-aria: forwardRef support

[jlarmstrongiv]

🙋‍♂️ Feature Request

Support for React.forwardRef on custom form elements to accommodate:

• The uncontrolled components pattern
• Third party libraries, such as react-hook-form

🤔 Expected Behavior

• Having an optional ref on my custom form component.

😯 Current Behavior

• I can use React.forwardRef, but then I would always need to pass in a ref
• I can go without refs, forgoing their benefits

💁‍♂️ Possible Solution / 💻 Examples

Implement a utility to share / combine refs. Several similar implementations already exist:

• https://gist.github.com/pie6k/b4717f392d773a71f67e110b42927fea
• https://itnext.io/reusing-the-ref-from-forwardref-with-react-hooks-4ce9df693dd
• https://gist.github.com/ray851107/b97a0e240d6b9262d1d04d85c63ecada
• https://github.com/smooth-code/react-merge-refs/blob/master/src/index.js

🔦 Context

I would like to build robust and accessible custom form components that support both controlled and uncontrolled component patterns.

[devongovett]

One pattern we've used is something like this:

const Button = React.forwardRef((props, ref) => {
  let fallbackRef = React.useRef();
  let domRef = ref || fallbackRef;

  return (
    <button ref={domRef}>button</button>
  );
});

This uses the passed ref if available, but falls back to a ref created by useRef. Is that what you were thinking? Seems like a nice util to have potentially.

[jlarmstrongiv]

Yes, that’s exactly what I was thinking! Thank you for the example 👍 either a utility hook or a mention in the docs would be a nice addition

[devongovett]

Sounds good! We could add a useOptionalRef hook to the @react-aria/utils package.

[Andarist]

Just keep in mind that you might often need access to the ref.current, but the provided ref can be a function - so instead of a simple ref || fallbackRef; you might need to implement a more complex solution of composing refs. I see that @jlarmstrongiv has already linked to such solutions - so you can take inspiration there. None of them behaves like regular refs though (the update timing is different, refs are not cleared with null etc) - I believe that the hook I've created in the past for my own usage gets pretty close to the regular semantics of refs: https://github.com/Andarist/use-composed-ref/blob/1cafdd6123d7e7aa4f3c8e6a74950c761524329a/src/index.ts#L20 .

[jherr]

@devongovett I'm not sure how to use your advice here on making a new version of, something like TextField with React.forwardRef. What React-Hook-Form is looking for is a ref for the underlying input. Other component toolkits have something like inputRef or innerRef as a property to handle this case. Is there something like that in Spectrum that I'm just not finding? I've scoured all the type definitions and the code.

[Andarist]

Other component toolkits have something like inputRef or innerRef as a property to handle this case

Those props only exist because in the past there was no React.forwardRef so a different prop name than ref had to be used to account for this issue.

The thing here gets complicated because TextFieldBase is using useImperativeHandle. Ideally TextFieldBase would use React.forwardRef as well and reuse the received ref when possible, but not sure how to best handle this here - given the API choice to expose extra imperative methods on the external ref rather than exposing the raw DOM node.

[jherr]

@Andarist Thanks for the reply. I'm down with using ref but that doesn't work in this case either. If it should work then I'd be happy to try to put together a PR that would make it work. I'm just not sure what the intention is.

[devongovett]

It was an intentional choice to not expose the raw DOM node from our refs, but wrap in an API we control. This allows us to swap out the underlying implementation when needed, e.g. switch element types. Also allows us to reuse the same API across multiple platforms, e.g. native, where the internal elements are different. Sometimes it's also unclear where the ref prop that's forwarded should go – does it go on the outer most element or on something inside?

There is a ref.current.UNSAFE_getDOMNode() method to get the outer-most element of any component in React Spectrum. This is unsafe because we don't guarantee stability of the element type that is returned. For textfield, there's also ref.current.getInputElement(), which returns the <input> element specifically.

If you need a ref object to pass the native input to something else, you could do something like this:

let textfieldRef = useRef();
let inputRef = {
  get current() {
    return textFieldRef.current.getInputElement();
  }
};

// Pass inputRef to whatever you like...

<TextField ref={textFieldRef} />

Perhaps there could be a util function to do this...

[jherr]

Gotcha. Thanks! Turns out that at least for react-hook-form you can us a Controller and manage it without a ref.

[bogdansoare]

Also having trouble with React's forwardRef and useTextField from @react-aria. My use case is the same, using react-hook-form. I think an utility should be baked in @react-aria since this is pretty common usage

[bluebill1049]

One of the benefits of exposing ref to third-party lib like react-hook-form is so we can focus on that input when an error occurred to improve accessibility. looking forward to the potential update.

[devongovett]

The ref exposed by the TextField component does have a focus() method already...

[reminjp]

I'm having trouble with the type error that the ref from React.forwardRef is React.Ref but @react-aria hooks accept only React.RefObject. Is there any recommended solution? Should we import @react-spectrum to use useDOMRef? Does anyone plan to add a hook like useDOMRef or useComposedRef (mentioned in #834 (comment)) to @react-aria?