diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx index 0d73e4ed0bd107..164dbd478a2bde 100644 --- a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx +++ b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx @@ -186,7 +186,18 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize( }; React.useEffect(() => { - const handleResize = debounce(() => { + const handleResize = () => { + renders.current = 0; + + // 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 + if (inputRef.current) { + syncHeightWithFlushSync(); + } + }; + const handleResizeWindow = debounce(() => { renders.current = 0; // If the TextareaAutosize component is replaced by Suspense with a fallback, the last @@ -202,7 +213,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize( const input = inputRef.current!; const containerWindow = ownerWindow(input); - containerWindow.addEventListener('resize', handleResize); + containerWindow.addEventListener('resize', handleResizeWindow); if (typeof ResizeObserver !== 'undefined') { resizeObserver = new ResizeObserver(handleResize); @@ -210,8 +221,8 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize( } return () => { - handleResize.clear(); - containerWindow.removeEventListener('resize', handleResize); + handleResizeWindow.clear(); + containerWindow.removeEventListener('resize', handleResizeWindow); if (resizeObserver) { resizeObserver.disconnect(); }