-
-
Notifications
You must be signed in to change notification settings - Fork 32.6k
[core] Remove RootRef usage #15347
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[core] Remove RootRef usage #15347
Conversation
Details of bundle changes.Comparing: 522c8f7...07ef2e9
|
9a8dac3
to
0375fb7
Compare
100cea9
to
883b0d2
Compare
883b0d2
to
a6571d3
Compare
7917766
to
07ef2e9
Compare
const rootRef = React.useRef(); | ||
// can be removed once we drop support for non ref forwarding class components | ||
const handleOwnRef = React.useCallback(ref => { | ||
rootRef.current = ReactDOM.findDOMNode(ref); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I believe we can add the // StrictMode ready
comment. If @eps1lon accepts it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes. Actually every findDOMNode that get's an instance from a ref should be strict-mode.
@@ -61,7 +68,7 @@ function TrapFocus(props) { | |||
return; | |||
} | |||
|
|||
if (!rootRef.current.contains(doc.activeElement)) { | |||
if (rootRef.current && !rootRef.current.contains(doc.activeElement)) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we warn if rootRef.current is not an instance of HTMLElement
but the TrapFocus is enabled (like we do in the Popper's prop-types)? It's a broad question, it's no tight to this effort.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sounds good. Probably better than checking for focus
i.e. duck-typing.
@@ -61,7 +68,7 @@ function TrapFocus(props) { | |||
return; | |||
} | |||
|
|||
if (!rootRef.current.contains(doc.activeElement)) { | |||
if (rootRef.current && !rootRef.current.contains(doc.activeElement)) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sounds good. Probably better than checking for focus
i.e. duck-typing.
const rootRef = React.useRef(); | ||
// can be removed once we drop support for non ref forwarding class components | ||
const handleOwnRef = React.useCallback(ref => { | ||
rootRef.current = ReactDOM.findDOMNode(ref); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes. Actually every findDOMNode that get's an instance from a ref should be strict-mode.
const ignoreNextEnforceFocus = React.useRef(); | ||
const sentinelStart = React.useRef(); | ||
const sentinelEnd = React.useRef(); | ||
const lastFocus = React.useRef(); | ||
const rootRef = React.useRef(); | ||
// can be removed once we drop support for non ref forwarding class components | ||
const handleOwnRef = React.useCallback(ref => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: Rather use instance
.
const handleOwnRef = React.useCallback(ref => { | |
const handleOwnRef = React.useCallback(instance => { |
A ref would be the the pointer-type i.e.
ref = { current: instance }
^^^^^^^^^^^^^^^^^^^^^ the ref as a pointer-like object
^^^^^^^^ the actual instance
ref = instance => {}
^^^^^^^^^^^^^^ the ref as a callback that is fired every time the instance changes
^^^^^^^^ the instance
After #15291, is merged TrapFocus is the only usage of RootRef.
This would be a breaking change because TrapFocus can only accept components that forward refs which affects everything that uses a Modal.
Fade and Grow needed to forward refs as they're used inside TrapFocus. Maybe we should do the same for the other Transitions?