Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[TextareaAutosize] Fix crash when used with React 18 & Suspense #33238

Merged
merged 4 commits into from Jun 24, 2022
Merged

[TextareaAutosize] Fix crash when used with React 18 & Suspense #33238

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5f51290
TextareaAutosize Fix error when input is null
howlettt Jun 21, 2022
6d66810
Merge branch 'master' into input-multiline-error
mnajdova Jun 23, 2022
3520a38
Add comment about the change and move the check in the ResizeObserver…
mnajdova Jun 23, 2022
fe1acc0
Fixing typo
howlettt Jun 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 10 additions & 2 deletions packages/mui-base/src/TextareaAutosize/TextareaAutosize.js
View file
Open in desktop
Expand Up @@ -145,7 +145,6 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref)
// In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
// when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
// Related issue - https://github.com/facebook/react/issues/24331
// TODO: Do this only in the resize observer?
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Leftover from #33253

flushSync(() => {
setState((prevState) => {
return updateState(prevState, newState);
Expand All @@ -156,7 +155,16 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref)
React.useEffect(() => {
const handleResize = debounce(() => {
renders.current = 0;
syncHeightWithFlushSycn();

// If the TextareaAutosize component is replaced by Suspense with a fallback, the last
// ResizeObserver's handler that runs because of the change in the layout is trying to
// access a dom node that is no longer there (as the fallback component is being shown instead).
// See https://github.com/mui/material-ui/issues/32640
// TODO: Add tests that will ensure the component is not failing when
// replaced by Suspense with a fallback, once React is updated to version 18
if (inputRef.current) {
syncHeightWithFlushSycn();
}
});
const containerWindow = ownerWindow(inputRef.current);
containerWindow.addEventListener('resize', handleResize);
Expand Down