[Input] Failed to execute 'getComputedStyle' on 'Window' when suspense triggers on react 18

[voliva]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When React 18.0.0 triggers a Suspense that hides a mounted <Input multiline />, TextareaAutosize @ syncHeight throws the following uncaught exception:

TextareaAutosize.js:42 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at eval (TextareaAutosize.js:42:43)
    at ResizeObserver.eval (TextareaAutosize.js:87:7)
    at later (debounce.js:9:12)

It seems like the exception can be ignored, but react dev server shows the uncaught exception window.

Expected behavior 🤔

<Input multiline /> should not throw exceptions when it enters suspense.

Steps to reproduce 🕹

Steps:

1. Open sandbox https://codesandbox.io/s/eager-hertz-6g658v?file=/src/app.js
2. Click on "Toggle View" button
3. // The app momentarily enters suspense loading the lazy route
4. // The exception is shown

For future reference, sandbox code:

import { Input, Button } from '@mui/material';
import { Suspense, useState, lazy } from 'react';

const LazyRoute = lazy(async () => {
  // Force react to show fallback suspense
  await new Promise(resolve => setTimeout(resolve, 1000));
  return import('./lazyRoute');
});

export function App() {
  const [showRoute, setShowRoute] = useState(false);

  return <Suspense fallback={null}>
    <Button onClick={() => setShowRoute(r => !r)}>Toggle view</Button>
    <hr />
    { showRoute ? <LazyRoute /> : <Input multiline inputProps={{ minRows: 4 }} defaultValue="Text" /> }
  </Suspense>
}

Context 🔦

When upgrading existing application to react 18, after changing from one route that has an <Input multiline> to another one

Your environment 🌎

No response

[dkadrios]

Nothing to add except to say we're running into the same issue -- hoping it gets triaged 🤞🏽

[siriwatknp]

I think the fix could be very simple, just return if there is no input html.

diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js
index f3e4cdbc22..a986c37565 100644
--- a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js
+++ b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js
@@ -39,6 +39,9 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref)
 
   const syncHeight = React.useCallback(() => {
     const input = inputRef.current;
+    if (!input) {
+      return;
+    }
     const containerWindow = ownerWindow(input);
     const computedStyle = containerWindow.getComputedStyle(input);