React version: 17.0.2
Steps To Reproduce
- With the input focused, press TAB to focus the button
- Press Shift + TAB to go back to the input
- Observe the console
Link to code example: https://codesandbox.io/s/hardcore-pine-u4qn2?file=/src/App.js
The current behavior
When the button is blurred, the value of
childRef is null inside the
onBlur callback. From my investigation, I noticed that
onBlur is being called after unmount (causing the ref to be null). If
inputRef.current.focus() is commented it gets called before unmount, not causing the bug. Also, forwarding the ref to an DOM element instead of
React.useImperativeHandle doesn't cause the bug.
The expected behavior
onBlur should be called before unmount while the ref still has a value.
For more context: https://github.com/mui-org/material-ui/issues/30285