A search panel has an Activate Search button that is supposed to programmatically focus a custom input component and update a status label to confirm activation. Clicking the button sets the status to "cannot focus" instead of "active" and the search input is never focused.
Click Activate Search - the status shows "cannot focus" and the input field is never focused. The button fires correctly but the ref never reaches the underlying input element.
When you pass a ref to a custom component rather than to a native HTML element, where does that ref actually end up?
When you pass a ref to a custom component rather than to a native HTML element, where does that ref actually end up?
Why this fixes it
Passing a ref to a function component without forwardRef causes React to silently drop it - the component has no mechanism to receive and attach a ref, so inputRef.current stays null after mount. When handleActivate checks inputRef.current it finds null and takes the else branch, setting status to "cannot focus" instead of calling focus(). Wrapping SearchInput with forwardRef accepts the ref as a second argument alongside props and passes it down to the underlying native input element, giving React a real DOM node to attach. inputRef.current now points to the actual input, the focus() call succeeds, and the status correctly shows "active".