A form has a custom button component. The parent uses a ref to trigger a click on the button programmatically when the user presses Enter. Clicking the button directly works fine.
Press Enter anywhere on the page, nothing happens and no log entry appears. The button works when clicked with a mouse but the keyboard shortcut does nothing.
When you pass a ref to a custom component, where does React actually attach it?
When you pass a ref to a custom component, where does React actually attach it?
Why this fixes it
When a ref is passed to a custom function component that does not use forwardRef, React silently drops it - btnRef.current stays null because there is no DOM node to attach to. The broken code makes this visible: the else branch logs the null failure message on every keypress. Wrapping ActionButton with forwardRef and attaching the ref argument to the native <button> element gives React a real DOM node. btnRef.current now holds the button, .click() fires correctly, and the action runs.