A comment form uses a custom input component that tracks character count and can programmatically focused by the parent via a button. Clicking Activate sets the status to "ref is null" instead of "focused" and the input never receives keyboard focus.
Clicking Activate sets the status label to "ref is null" instead of "focused". The input never receives keyboard focus regardless of how many times the button is clicked.
React can only attach one ref to a single DOM element. Consider what happens to the forwarded ref when `localRef` has already claimed that attachment, and whether there is a way to satisfy both refs at the same time.
React can only attach one ref to a single DOM element. Consider what happens to the forwarded ref when `localRef` has already claimed that attachment, and whether there is a way to satisfy both refs at the same time.
Why this fixes it
React can only attach one ref to a single DOM element. When ref={localRef} is on the input, the ref argument passed in through forwardRef receives nothing and inputRef.current in the parent stays permanently null. The fix replaces ref={localRef} with a callback ref function called setRefs that manually assigns the input element to both localRef.current and ref.current in a single call. Both refs now point to the same DOM node, so the character counter and the parent's programmatic focus call work correctly without competing for the attachment.