[material-ui] Element ref access React 19 compatibility #43132
Conversation
DiegoAndai
added
package: material-ui
DiegoAndai
changed the title
Netlify deploy previewhttps://deploy-preview-43132--material-ui.netlify.app/ @material-ui/utils: parsed: +1.48% , gzip: +1.07% Bundle size reportDetails of bundle changes (Toolpad) |
DiegoAndai
force-pushed
the
element-ref-access-compatibility
branch
from
227a3e0 to
d7e5c39
Compare
| : // @ts-expect-error element.ref is not included in the ReactElement type | ||
| // We cannot check for it, but isValidElement is true at this point |
There was a problem hiding this comment.
The ref property does not exist in ReactElement. We've silenced this error in our codebase since: https://github.com/mui/material-ui/pull/24565/files#diff-dcdcbff6b975b552227833f729bf59d31e97e4876a9d6ce982a07c9e1436d9bfR90
Here are other occurrences, probably copy-pasted: https://github.com/search?q=repo%3Amui%2Fmaterial-ui%20%22TODO%20upstream%20fix%22&type=code
I don't think they'll fix it now that they moved the ref to the props.
I don't know if there's a better way to handle this, I couldn't find one.
There was a problem hiding this comment.
I would just recommend if you find an open issue about this, to link in the comment above so we know once it's merged that we can remove the @ts-ignore.
There was a problem hiding this comment.
I couldn't find any issue in the original PR, DefinitelyTyped issues, or DefinitelyTyped discussions. I don't know if they have discussed it previously. I don't think it will get much traction as it's probably been like this forever and it's now removed in React 19.
I created a discussion asking for this and linked it.
| const handleRef = useForkRef( | ||
| React.isValidElement(children) ? getElementRef(children) : null, | ||
| forwardedRef, | ||
| ); |
There was a problem hiding this comment.
| const handleRef = useForkRef( | |
| React.isValidElement(children) ? getElementRef(children) : null, | |
| forwardedRef, | |
| ); | |
| const handleRef = useForkRef(getElementRef(children), forwardedRef); |
We can likely simplify, as the getElementRef handles this already.
There was a problem hiding this comment.
I refactored to handle this case and renamed the util accordingly 😊
| : // @ts-expect-error element.ref is not included in the ReactElement type | ||
| // We cannot check for it, but isValidElement is true at this point |
There was a problem hiding this comment.
I would just recommend if you find an open issue about this, to link in the comment above so we know once it's merged that we can remove the @ts-ignore.
Closes: #42604
Part of: #42824
Make element ref access compatible with React 19 and older versions. This work was started in #42818, and this PR covers other cases and refactors the util to be shared between packages.
These commits were cherry picked from #42824.