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

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

Steps to reproduce 🕹

Link to live example:

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.

TamNhiDuong · 2023-11-14T11:54:56Z

I got the same problem with multiline TextInput. Reproduce by copying exact example code in MUI website:
<TextField id="outlined-multiline-static" label="Multiline" multiline rows={4} defaultValue="Default Value" />

And the error message is:

ERROR
ResizeObserver loop completed with undelivered notifications.
at handleError (http://localhost:3000/viewer4/static/js/bundle.js:175233:58)
at http://localhost:3000/viewer4/static/js/bundle.js:175252:7

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.

hiro-daikin · 2024-01-12T02:24:38Z

Found a workaround using InputProps.

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

waytothevenus · 2024-01-12T14:08:34Z

I've faced the same problem and fixed with this code.

`import { ResizeObserver } from '@juggle/resize-observer';

const ro = new ResizeObserver((entries, observer) => {
// Changing the body size inside of the observer
// will cause a resize loop and the next observation will be skipped
document.body.style.width = '50%';
});

// Listen for errors
window.addEventListener('error', e => console.log(e.message));

// Observe the body
ro.observe(document.body);`

phudtran · 2024-01-19T09:30:55Z

Also seeing this in JoyUI
Repros on the Textarea component page

https://mui.com/joy-ui/react-textarea/

On MacOS Safari, repros with zooming in/out (Command +/-)

nickluger · 2024-01-24T15:53:25Z

Found a workaround using InputProps.

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

That's no longer resizing in my case.

maxwell-stemlogic · 2024-02-01T06:59:57Z

This issue is intermittently ongoing.

Using "@mui/material": "^5.15.7"
The issue persisted even after changing to version 5.14.7
Rows={5} does not fix it as well.

malashevskyi · 2024-02-07T10:28:49Z

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.

The same error occurs when the placeholder does not fit in the input size.
An error is shown every time a placeholder is moved to a new line.

codesandbox to reproduce

samuelsycamore · 2024-02-07T15:47:46Z

It appears that this issue may be related to mui/material-ui#37135 and/or mui/material-ui#38728 given the timing. It showed up in testing in mui/material-ui#40929 (comment).

iam-gopi · 2024-02-18T06:59:40Z

I too facing the same issue couldnt able to fix it. I've not used any UI library except Tailwind css classes here is the code of my textarea

<textarea id="address" rows="4" class="block p-2.5 w-full text-lg text-gray-900 rounded-lg border-0 border-b-2 bg-transparent focus:border-primaryRed focus:outline-none " placeholder="Provide address here" name="address" onChange={handleChange} autoComplete="false" aria-autocomplete="none" value={formData.address} ></textarea>

Im getting this error when I click on the textarea to enter something. Here is the screenshot of the error message

oneQiu · 2024-02-22T12:29:47Z

同样出现这个问题，很烦心了。

alexasparks · 2024-03-19T18:24:59Z

This was an issue for me too! For now I'm replacing my multiline TextField with InputBase and adjusting styles. It gets rid of the resize error in my environment. We'll see what happens in Sentry once I get the update deployed.

luke-ken · 2024-03-20T20:39:08Z

I've also encountered the same issue while using the <TextField/> from @mui/material, although my usage is a bit different.
I'm using multiline together with maxRows in a <TextField/> that has no specific width.

<TextField
      multiline
      maxRows={2}
/>

Here is a simple codesandbox to reproduce.

mohsinulhaq-deshaw · 2024-03-21T11:10:38Z

Hi team, were we able to get closer to the bottom of this issue?
Could someone from the core team shed some light on what their hunch on this is and what could be the potential solutions?
We would be happy to help, given proper guidance.

This has been flooding our error logs, particularly from users who are triggering resizes on the multiline TextFields.

colmtuite · 2024-03-21T22:12:35Z

Auto-sizing can be handled natively these days with field-sizing. So we're going to deprecate this component soon.

Demo

waigel · 2024-03-21T22:20:27Z

I respectfully disagree; the suggested solution isn't sufficient. Though the new CSS variable could replace MUI's current approach, we're not there yet. Please reopen the ticket so we can address the ResizeObserver problem.

colmtuite · 2024-03-21T22:53:50Z

What I meant to say was that it should be well-supported soon, and our new Textarea component (based on our new API design) wouldn't be roadmapped until the field-sizing is well-supported anyway.

But I'll reopen for now and we'll chat internally next week. I'll update again next week after we chat.

alirezavafaee · 2024-04-06T06:39:44Z

It may help,
Solving ResizeObserver Errors
https://medium.com/@chamaraS/resizeobserver-for-react-developers-a91df3608944

valeriavodianchuk · 2024-04-24T12:41:38Z

Any updates?

prechapl · 2024-05-08T19:17:57Z

I am getting the errors while using <TextField InputProps={{ multiline: true}} ... /> in 5.15.14. Does anyone know if upgrading to v6 or v7 would fix the issue?

PastaLaPate · 2024-05-15T17:12:35Z

I'm getting the same error just if I use a native <textarea> is this a wepback, or a react problem ?

avalenti89 · 2024-05-17T14:36:30Z

My working workaround
.MuiTextField-root.MuiFormControl-fullWidth{ width: 100vw; max-width: 100%; }

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

zannager added the component: TextareaAutosize The React component. label Sep 22, 2023

zannager assigned mnajdova Sep 22, 2023