Open clement-faure opened 1 year ago
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.
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
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.
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/material@5.12.1
, it started working for me. I'll continue using this version until it gets updated. P.S.: I haven't tried other versions.
I reverted to version 5.14.3 and it works now :)
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.
rows={1} It worked for me
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);`
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 +/-)
Found a workaround using
InputProps
.<TextField InputProps={{ rows: 18, multiline: true, inputComponent: 'textarea' }} />
This solution works for me. Thanks for that ๐
Found a workaround using
InputProps
.<TextField InputProps={{ rows: 18, multiline: true, inputComponent: 'textarea' }} />
That's no longer resizing in my case.
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.
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.
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 https://github.com/mui/material-ui/pull/40929#issuecomment-1931862164.
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}
`
Im getting this error when I click on the textarea to enter something. Here is the screenshot of the error message
ๅๆ ทๅบ็ฐ่ฟไธช้ฎ้ข๏ผๅพ็ฆๅฟไบใ
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.
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.
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 TextField
s.
Auto-sizing can be handled natively these days with field-sizing
. So we're going to deprecate this component soon.
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.
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.
Also curious what you guys discussed. It's been 2 weeks.
It may help, Solving ResizeObserver Errors https://medium.com/@chamaraS/resizeobserver-for-react-developers-a91df3608944
Any updates?
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?
I'm getting the same error just if I use a native
My working workaround
.MuiTextField-root.MuiFormControl-fullWidth{ width: 100vw; max-width: 100%; }
Steps to reproduce ๐น
Link to live example:
Steps:
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 ๐
Search keywords:
Search keywords: