A comment form uses a custom input component that tracks character count and can be programmatically focused by the parent via a button. Clicking Activate should focus the input and update the status label.
Clicking Activate sets the status 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. What happens to the forwarded ref when another ref has already claimed the DOM attachment?
React can only attach one ref to a single DOM element. What happens to the forwarded ref when another ref has already claimed the DOM attachment?
Why this fixes it
`forwardRef` provides the parent with a ref argument, but React can only attach a single ref to a DOM element. Because the input used `ref={localRef}`, the forwarded ref never received the DOM node and `inputRef.current` in the parent remained `null`. The fix replaces `ref={localRef}` with a callback ref that assigns the same DOM element to both `localRef.current` and `ref.current`. This allows the character counter logic and the parent's focus functionality to share access to the same input element without competing for the ref attachment.