material-ui
material-ui copied to clipboard
mui
[TextareaAutosize] ResizeObserver loop completed with undelivered notifications (when resizing view with TextArea with scroll inside)
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:
Search keywords:
Hi @clement-faure ! 👋 Can you please create a reproduction of the error you're encountering (on CodeSandbox for example) so we can investigate further?
I have the same issue, when I add 'multiline' property to TextField.
I'm getting this too via Sentry reports but have yet to be able to reproduce myself. I have also been trying in a codesandbox.
Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Also getting the same error on Sentry, occurs when going from one route to another. Not sure what the root cause is.
Error: ResizeObserver loop completed with undelivered notifications
Also getting the same error while using text area inside scroll, I Believe it has something to do with TextareaAutosize
Reopening this since we're getting more reports that seem to be related. Can anyone share a reproduction of the problem?
Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.
Hi, getting ResizeObserver loop completed with undelivered notifications. error in Text area autosize. Do we have a solution for it yet?
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!
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.
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"));
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.
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.
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.
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!
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.
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
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
errorwindow 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.
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"
}}
/>
I have been facing the same issue, I am using the <OutlinedInput /> component. For anyone who wants a temporary solution, at the end I set inputComponent and inputProps manually.
<OutlinedInput
value={inputMessage}
inputComponent="textarea"
inputProps={{
ref: messageRowRef,
style: {
resize: 'none',
minHeight: '1em',
padding: `${messageRowPadding}px`,
scrollPadding: `${messageRowPadding}px`,
},
}}
/>
with a useEffect to set all the heights and rows
const handleInputMessageHeight = () => {
if (!messageRowRef.current) return;
const target = messageRowRef.current as
| HTMLTextAreaElement
| HTMLInputElement;
// reset height
target.style.height = '1px';
// get heights and rows
const heightWithoutPaddings = target.scrollHeight - messageRowPadding * 2;
const lineHeight = parseInt(
window.getComputedStyle(target).lineHeight.slice(0, -2),
10,
);
const rows = heightWithoutPaddings / lineHeight;
// max rows
if (rows <= messageRowMaxRows) {
target.style.height = `${heightWithoutPaddings}px`;
} else {
target.style.height = `${lineHeight * messageRowMaxRows}px`;
}
};
React.useEffect(() => {
handleInputMessageHeight();
}, [inputMessage]);
After reverting to version @mui/[email protected], it started working for me. I'll continue using this version until it gets updated. P.S.: I haven't tried other versions.
I'm giving up on waiting for this to get fixed. Between this error and users randomly getting "Maximum update depth exceeded.", this component is unstable.
For others looking for solutions, try react-textarea-autosize
I recently experienced a bug close to this in https://github.com/mui/material-ui/pull/38728/files#diff-4bad88270b0417529b9c97204bcd993e4117f43e6ba590c8c20ddc49157d09a2R191, which we also faced in https://github.com/mui/mui-x/pull/8744/files.
My workaround for now using the TextareaAutosize component is to set the minRows and maxRows equal to each other. Effectively disabling the resizing aspect of the component.
From testing each version one-by-one, it looks like the changes from 5.14.7 -> 5.14.8 has the issue.
That is, the latest version we found without the issue is 5.14.7
Found a workaround using InputProps.
<TextField
InputProps={{
rows: 18,
multiline: true,
inputComponent: 'textarea'
}}
/>
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);`
