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

clement-faure commented 9 months ago

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:

samuelsycamore commented 8 months 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?

ps-mladen-savic commented 8 months ago

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

stevemckenzie commented 8 months ago

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.

github-actions[bot] commented 8 months ago

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.

ZonicaP commented 8 months ago

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

marthrusk commented 8 months ago

Also getting the same error while using text area inside scroll, I Believe it has something to do with TextareaAutosize

samuelsycamore commented 8 months ago

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

github-actions[bot] commented 8 months ago

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.

ShafiaShahid commented 8 months ago

Hi, getting ResizeObserver loop completed with undelivered notifications. error in Text area autosize. Do we have a solution for it yet?

ryan-saffer commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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"
        }}
      />

LioQing commented 7 months ago

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]);

wilson1999112 commented 7 months ago

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.

andyflatt commented 7 months ago

I reverted to version 5.14.3 and it works now :)

stevemckenzie commented 7 months ago

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

oliviertassinari commented 6 months ago

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.

Italo-Castro commented 6 months ago

rows={1} It worked for me

Yamaha32088 commented 6 months ago

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.

maxduu commented 6 months ago

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

hiro-daikin commented 5 months ago

Found a workaround using InputProps.

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

waytothevenus commented 5 months ago

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 commented 5 months ago

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 +/-)

danielroccha commented 5 months ago

Found a workaround using InputProps.
  <TextField
      InputProps={{
          rows: 18,
          multiline: true,
          inputComponent: 'textarea'
      }}
  />
This solution works for me. Thanks for that 🎉

nickluger commented 5 months ago

Found a workaround using InputProps.

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

That's no longer resizing in my case.

maxwell-stemlogic commented 5 months ago

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 commented 4 months ago

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

2024-02-07_12-24

samuelsycamore commented 4 months ago

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.

iam-gopi commented 4 months ago

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

oneQiu commented 4 months ago

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

alexasparks commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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

Demo

waigel commented 3 months ago

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 commented 3 months ago

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.

adrianbunea commented 3 months ago

Also curious what you guys discussed. It's been 2 weeks.

alirezavafaee commented 2 months ago

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

valeriavodianchuk commented 2 months ago

Any updates?

prechapl commented 1 month ago

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 commented 1 month ago

I'm getting the same error just if I use a native is this a wepback, or a react problem ?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/avalenti89"><img src="https://avatars.githubusercontent.com/u/19409732?v=4" />avalenti89</a> commented <strong> 1 month ago</strong> </div> <div class="markdown-body"> <p>My working workaround <code> .MuiTextField-root.MuiFormControl-fullWidth{ width: 100vw; max-width: 100%; } </code></p> </div> </div> <div class="page-bar-simple"> <a href="/mui/base-ui/167?page=2" class="next">Next</a> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

mui / base-ui