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. Instead the log shows a null ref error message. 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 without `forwardRef`, React silently drops it - `btnRef.current` stays `null` and the keyboard handler falls into the else branch, logging the null error. Wrapping `ActionButton` with `forwardRef` and attaching the `ref` argument to the native `<button>` gives React a real DOM node. `btnRef.current` now holds the button and `.click()` fires the action correctly.