Help articles
Unable to get a ref to an input component
This page describes Studio v2
The warning described here was printed by @sanity/form-builder in Studio v2, and no Studio version from v3 onward emits it. The fix below is also out of date: custom inputs are no longer wrapped in React.forwardRef to receive focus. The current form API passes an elementProps object to your input, which you spread onto the element that should take focus. See Focus and UI state in custom inputs.
This happens when the editor is unable to create a ref to an input component. This is likely because of one of the following reasons:
- The input component is wrapped in a higher order component (HOC), which does not delegate a
focus()method to the component it wraps. See this guide on how to forward a ref inside a higher order component. - The input component is a function component. Since function components cannot be given refs, the input component must be wrapped using React.forwardRef in order to specify which element should receive focus. Note: keep in mind that the forwarded ref must be attached to an element that actually exposes a
.focus()method.