diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js index 360d6433ab91dd..e47acd62bcf0d5 100644 --- a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js +++ b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js @@ -160,8 +160,6 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref) // 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(); } diff --git a/test/e2e/fixtures/TextareaAutosize/TextareaAutosizeSuspense.tsx b/test/e2e/fixtures/TextareaAutosize/TextareaAutosizeSuspense.tsx new file mode 100644 index 00000000000000..cc3bda80250449 --- /dev/null +++ b/test/e2e/fixtures/TextareaAutosize/TextareaAutosizeSuspense.tsx @@ -0,0 +1,30 @@ +import TextareaAutosize from '@mui/base/TextareaAutosize'; +import Button from '@mui/material/Button'; +import * as React from 'react'; + +function LazyRoute() { + const [isDone, setIsDone] = React.useState(false); + + if (!isDone) { + // Force React to show fallback suspense + throw new Promise((resolve) => { + window.setTimeout(resolve, 1); + setIsDone(true); + }); + } + + return
; +} + +export default function TextareaAutosizeSuspense() { + const [showRoute, setShowRoute] = React.useState(false); + + return ( + + + + {showRoute ? : } + + + ); +} diff --git a/test/e2e/index.js b/test/e2e/index.js index bd3c7fe9a052f9..937e63d1287506 100644 --- a/test/e2e/index.js +++ b/test/e2e/index.js @@ -1,5 +1,6 @@ import * as React from 'react'; import ReactDOM from 'react-dom'; +import { createRoot } from 'react-dom/client'; import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; import * as DomTestingLibrary from '@testing-library/dom'; import TestViewer from './TestViewer'; @@ -107,7 +108,8 @@ if (typeof ReactDOM.unstable_createRoot === 'function') { const root = ReactDOM.unstable_createRoot(container); root.render(children); } else { - ReactDOM.render(children, container); + const root = createRoot(container); + root.render(children); } window.DomTestingLibrary = DomTestingLibrary; diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts index 97386094b96cd7..a9b2822ea07cd2 100644 --- a/test/e2e/index.test.ts +++ b/test/e2e/index.test.ts @@ -192,4 +192,20 @@ describe('e2e', () => { ); }); }); + + describe('', () => { + // https://github.com/mui/material-ui/issues/32640 + it('should handle suspense without error', async () => { + const pageErrors: string[] = []; + page.on('pageerror', (err) => pageErrors.push(err.name)); + + await renderFixture('TextareaAutosize/TextareaAutosizeSuspense'); + expect(await page.isVisible('textarea')).to.equal(true); + await page.click('button'); + expect(await page.isVisible('textarea')).to.equal(false); + await page.waitForTimeout(200); // Wait for debounce to fire (166) + + expect(pageErrors.length).to.equal(0); + }); + }); });