-
-
Notifications
You must be signed in to change notification settings - Fork 39
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[TextareaAutosize] ResizeObserver loop completed with undelivered notifications (when resizing view with TextArea with scroll inside) #167
Comments
This comment was marked as resolved.
This comment was marked as resolved.
I have the same issue, when I add 'multiline' property to TextField. |
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
Reopening this since we're getting more reports that seem to be related. Can anyone share a reproduction of the problem? |
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
I was facing the same error, and also had I was unable to reproduce the error on CodePen, but hopefully this helps others! |
I can also confirm that using the I am using:
It's worth noting that the warning appears occasionally on page refresh (about 80% of the times). @ryan-saffer adding |
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:
The warning stops appearing if I comment out the line
This is the client code, reduced to the minimum:
|
I also face this error. I use |
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:
Then put some long text in it and an error will appear whenever number of lines changes due to window resizing. Codesandbox to reproduce: 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 |
I got the same problem with multiline TextInput. Reproduce by copying exact example code in MUI website: And the error message is:
|
Similar issue to this for me. If I add the maxRows prop, then the error no longer appears. |
Auto-sizing can be handled natively these days with |
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 But I'll reopen for now and we'll chat internally next week. I'll update again next week after we chat. |
This comment was marked as resolved.
This comment was marked as resolved.
It may help, |
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 <textarea> is this a wepback, or a react problem ? |
My working workaround |
We hit this error and downgrading to |
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.
// css
|
+1 |
The last version of MUI where it works as it should is @mui/material@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/material@5.15.10 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. |
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 This issue was moved from the However, for the Material UI TextField with the --- 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. |
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. mui/base-ui#167 Downgraded mui to a version where this isn't an issue
Oi, lost a day to tracking this down |
Any updates on this issue? |
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 |
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:
The text was updated successfully, but these errors were encountered: