[TextareaAutosize] ResizeObserver loop completed with undelivered notifications (when resizing view with TextArea with scroll inside) #43718

clement-faure · 2023-09-22T14:06:53Z

Steps to reproduce 🕹

Link to live example:

https://codesandbox.io/p/sandbox/mui-resizeobserver-loop-error-d2w936

Steps:

Create view with TextArea component
Set rows props to 2
Set default value to long text
Try resizing view

Current behavior 😯

All seems to works fine at first view but sentry report a "ResizeObserver loop completed with undelivered notifications." error.

Expected behavior 🤔

No error should occur

Context 🔦

No response

Your environment 🌎

 System:
    OS: macOS 13.5.2
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
  Browsers:
    Chrome: 116.0.5845.187
    Edge: Not Found
    Safari: 16.6
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.16 
    @mui/core: ^5.0.0-alpha.54 => 5.0.0-alpha.54 
    @mui/core-downloads-tracker:  5.14.10 
    @mui/envinfo: ^2.0.9 => 2.0.9 
    @mui/icons-material: ^5.14.9 => 5.14.9 
    @mui/material: ^5.14.10 => 5.14.10 
    @mui/private-theming:  5.14.10 
    @mui/styled-engine:  5.14.10 
    @mui/system:  5.14.10 
    @mui/types:  7.2.4 
    @mui/utils:  5.14.10 
    @types/react: ^18.2.21 => 18.2.21 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.2.2 => 5.2.2

Search keywords:

The text was updated successfully, but these errors were encountered:

ps-mladen-savic · 2023-10-11T11:26:11Z

I have the same issue, when I add 'multiline' property to TextField.

samuelsycamore · 2023-10-23T13:54:09Z

Reopening this since we're getting more reports that seem to be related. Can anyone share a reproduction of the problem?

ryan-saffer · 2023-11-02T03:44:24Z

I was facing the same error, and also had multiline on my <TextField />. The error disappeared when I added the property rows={1} to the <TextField />.

I was unable to reproduce the error on CodePen, but hopefully this helps others!

monteiz · 2023-11-04T12:03:06Z

I can also confirm that using the multiline attribute in the TextField component is raising the exception ResizeObserver loop completed with undelivered notifications.

I am using:

"@mui/material": "^5.14.16",
"@mui/styles": "^5.14.16",
"react": "^17.0.2",
"react-dom": "^17.0.2"

It's worth noting that the warning appears occasionally on page refresh (about 80% of the times).

@ryan-saffer adding rows={1} as a workaround did not work for me. The only way is to remove the multiline attribute.

monteiz · 2023-11-04T13:46:21Z

I could at least isolate the problem. In my case, it was lying into the main mustache template. This is a simplified version that I hope it helps you to reproduce the issue:

<!doctype html>
<html>
	<head>
		<style>
			div.hidden {
				display: none !important;
			}
		</style>
	</head>

	<body>
		<div id="main" class="hidden">{{ html }}</div>

		<script
			src="https://localhost:9004/bundle.js?{{ webpack_hash }}"
			type="text/javascript"
		></script>

		<script>
			function hidePreloader() {
				const el = document.querySelector("#main");
				el.classList.remove("hidden"); // this line is causing the warning to appear
			}

			document.body.onload = hidePreloader;
		</script>
	</body>
</html>

The warning stops appearing if I comment out the line

el.classList.remove("hidden");

This is the client code, reduced to the minimum:

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@mui/material/TextField/index.js";

const App = () => {
	return <TextField multiline></TextField>;
};

ReactDOM.render(<App />, document.querySelector("#main"));

abuuer · 2023-11-06T21:28:40Z

I faced the same error while using multiline inside <TextField />. The error seemed to be reproduced everytime I resize the page, and occurs at the exact moment when the scrollbar appears inside the TextField as shown in the second picture. The error disappears when I remove multiline. However, I am still trying to reproduce the error in codesandbox with no luck so far.

Dzemik55 · 2023-11-08T11:33:59Z

I also face this error. I use <TextField /> with multiline, fullWidth and maxRows={Infinity} and it happens when I resize the window. I tried to reproduce the error in codesandbox but it just doesn't occur there.

cpetersonco · 2023-11-10T16:53:27Z

I am also encountering this issue. It seems like this error is already being handled in the test environment, so we may need to apply the error handling here in TextareaAutosize.tsx to all environments.

beyonditsolutions · 2023-11-13T15:22:46Z

I have exactly the same issue with MUI 5.14.11! The only thing I can add, it only happens when the breakpoint SM (600px width) is passed!

adamplonka · 2023-11-13T20:10:12Z

I'm having the same issue. Actually the whole code needed to reproduce this issue is just:

<Textarea />

Then put some long text in it and an error will appear whenever number of lines changes due to window resizing.

Codesandbox to reproduce:
https://codesandbox.io/s/compassionate-clarke-fzzvjv?file=/src/App.js

It happens only when the whole window resizes, so it doesn't work on codesandbox and webpack gives us a nasty red overlay with this error but in this example, I attached to the error window event to show the error in the console.

ChrisB1123 · 2023-11-24T14:22:56Z

I'm having the same issue. Actually the whole code needed to reproduce this issue is just:
<Textarea />
Then put some long text in it and an error will appear whenever number of lines changes due to window resizing.

Codesandbox to reproduce: https://codesandbox.io/s/compassionate-clarke-fzzvjv?file=/src/App.js

It happens only when the whole window resizes, so it doesn't work on codesandbox and webpack gives us a nasty red overlay with this error but in this example, I attached to the error window event to show the error in the console.

Similar issue to this for me. If I add the maxRows prop, then the error no longer appears.

gvtrindade · 2023-11-30T00:42:26Z

I've been having the same issue, but with the <TextareaAutosize /> component. Tried all tips reported in the issue that could solve the problem to no avail.

<TextareaAutosize
        id={id}
        className="question"
        style={{
          textAlign: "justify",
          width: "100%",
          resize: "none",
          outline: 0,
          color: disabled ? "#bcbec2" : "black"
        }}
      />

paolobiavati · 2024-05-27T19:19:17Z

In my case this error appears with the textarea fullWidth, due to window resize, everytimes the textarea changes the number of lines or show the scroll bar.
I found a workaround:
set rows to a fix number and give style overflow-y: scroll !important; to textarea:
// jsx

               <TextField
                    fullWidth
                    multiline
                    rows={6}
                />

// css

textarea {
    overflow-y: scroll !important;
}

vitexikora · 2024-06-18T10:44:28Z

The last version of MUI where it works as it should is @mui/[email protected]
Updating to 5.15.11 (or 5.15.20) introduces this ResizeObserver error, which is pretty annoying in development.
I cannot make any mentioned workaround work, so for now we are cementing in 5.15.10

There is nothing really too specific in our use case - standard MUI layout with Papers, Drawer, Tabs.

DanielW093 · 2024-06-19T14:03:41Z

The last version of MUI where it works as it should is @mui/[email protected] Updating to 5.15.11 (or 5.15.20) introduces this ResizeObserver error, which is pretty annoying in development. I cannot make any mentioned workaround work, so for now we are cementing in 5.15.10

There is nothing really too specific in our use case - standard MUI layout with Papers, Drawer, Tabs.

Interestingly enough, I still get the error in @mui/[email protected] when using the multiline box in a tab. When refresh the page, it doesn't happen, but when I switch to a different MUI tab and then back to the one with the textbox, the error appears. Like you, there's nothing that strange about my use case. It's entirely standard MUI components.

ZeeshanTamboli · 2024-06-21T15:12:41Z

Can someone provide live examples on CodeSandbox or StackBlitz? I can reproduce the issue with Joy UI Textarea (CodeSandbox) as shown here.

It would help if we get separate reproductions for Base UI TextareaAutosize and Material UI TextField with the multiline prop.

This issue was moved from the material-ui repo to this repository. The new Base UI repository includes new components available as the @base_ui/react package. I believe the TextareaAutosize in this package should not throw an error due to the change done in mui/base-ui#104 using requestAnimationFrame for the Resize Observer handler (as shown below).

However, for the Material UI TextField with the multiline prop, the legacy Base UI TextareaAutosize (used by Material UI <TextField multiline /> and Joy UI Textarea) and Joy UI Textarea, we need to fix it in the core repo as shown below:

--- a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
+++ b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
@@ -144,10 +144,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(
     const handleResize = () => {
       syncHeight();
     };
-    // Workaround a "ResizeObserver loop completed with undelivered notifications" error
-    // in test.
-    // Note that we might need to use this logic in production per https://github.com/WICG/resize-observer/issues/38
-    // Also see https://github.com/mui/mui-x/issues/8733
+    // Workaround a "ResizeObserver loop completed with undelivered notifications" error.
     let rAF: any;
     const rAFHandleResize = () => {
       cancelAnimationFrame(rAF);
@@ -164,9 +161,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(
     let resizeObserver: ResizeObserver;

     if (typeof ResizeObserver !== 'undefined') {
-      resizeObserver = new ResizeObserver(
-        process.env.NODE_ENV === 'test' ? rAFHandleResize : handleResize,
-      );
+      resizeObserver = new ResizeObserver(rAFHandleResize);
       resizeObserver.observe(input);
     }

I'm not entirely sure if this will fix the issue, so I'm requesting live reproductions first to test this change.

DIPANKAR-123 · 2024-06-25T09:29:18Z

paolobiavati

Thanks buddy, this works as of now.

Implemented api call to get real notes from api. Implemented a useFetch hook to reuse. Left a few TODOs as this took a while to get working and exceeded my time box MUI seems to have an issue with the textField causing a resize observer error when multilines is used. https://github.com/mui/base-ui/issues/167 Downgraded mui to a version where this isn't an issue

PasinduSenanayake · 2024-07-21T05:36:04Z

This may not be the best solution and it won't solve the problem for everyone. But in my case this occurs when the width of the text field is less than 300px. (I didn't deep dive to find the root cause). So adding style={{minWidth:'300px'}} worked for me. It's not perfect, but as for the moment I'm happy with this hotfix as my implementation has a minWidth always greater than 300px.

jacknkandy · 2024-09-04T07:36:09Z

Having the same issue. Mine specifically is occurring when I have a TextField component with the multiline property enabled, being rendered in a Dialog on the initial page load. The issue wont occur if the dialog is opened after the page has loaded.

My workaround is as follows:

    const [multiline, setMultiline] = React.useState(false);

    React.useEffect(() => {
        setMultiline(true);
    }, []);

    render (
        <TextArea
            ...
            multiline={multiline}
        />
    );

So the text area is initially rendered without multiline, as soon as the component is mounted, the multiline property is toggled to true. This use case works for me, but understand it might not work for others.

madison-boman · 2024-09-30T18:38:43Z

Found a workaround using InputProps.

  <TextField
      InputProps={{
          rows: 18,
          multiline: true,
          inputComponent: 'textarea'
      }}
  />

This worked for me! Thanks!

mnajdova · 2024-10-02T13:25:31Z

Can anyone share a reproduction with Material UI? If you can't do it in CodeSandbox, feel free to create a GH repo with it. I tried it myself locally but I am not able to reproduce it.

johneriksson · 2024-10-04T11:23:00Z

@mnajdova
CodeSandbox link. Sometimes the error is logged as soon as the page loads. Other times the error will appear when the width is changed in the useEffect.

sipickles · 2024-10-27T11:37:55Z

Found a workaround using InputProps.

  <TextField
      InputProps={{
          rows: 18,
          multiline: true,
          inputComponent: 'textarea'
      }}
  />

Best workaround I think. Thanks!

MalyugaSensei · 2024-11-19T10:54:16Z

This solution with the react-textarea-autosize library helped me:

import TextareaAutosize
// ...
InputProps={{
    multiline,
    inputComponent: TextareaAutosize,
}}

mj12albert · 2024-11-25T14:08:51Z

I've opened a PR with a potential fix, here's a demo sandbox which is forked from the latest repro in this comment

In the mean time, if you are affected by this issue you can try this fix locally by updating the versions in your package.json like this:

"dependencies": {
    "@mui/material": "https://pkg.csb.dev/mui/material-ui/commit/8a42ad70/@mui/material",
    "@mui/system": "https://pkg.csb.dev/mui/material-ui/commit/8a42ad70/@mui/system"
}

clement-faure added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 22, 2023

zannager assigned mnajdova Sep 22, 2023