ResizeObserver loop completed with undelivered notifications

[kimskovhusandersen]

Provide a general summary of the issue here

When using the useComboBox hook from React Spectrum (in conjunction with hooks such as useButton, usePopover, Overlay, useListBox, and useOption), we occasionally encounter the following error ResizeObserver loop completed with undelivered notifications.
This error appears to be related to the useResizeObserver hook implementation.

🤔 Expected Behavior?

The application should not crash. The ResizeObserver should be managed in a way that it cleans up observers and handles notifications without causing a crash or unhandled exceptions.

😯 Current Behavior

The error ResizeObserver loop completed with undelivered notifications is thrown, leading to a complete application crash. This prevents users from interacting with the application until a full reload is performed.

💁 Possible Solution

Instead of applying immediate DOM updates on every notification, consider debouncing or throttling your update logic. This reduces the frequency of changes and can help avoid recursive resize events.

🔦 Context

using @react-aria/utils 3.27

"@react-aria/button": "^3.9.1",
"@react-aria/combobox": "^3.8.2",
"@react-aria/focus": "^3.18.4",
"@react-aria/listbox": "^3.11.3",
"@react-aria/overlays": "^3.20.0",
"@react-aria/toast": "^3.0.0-beta.15",
"@react-stately/collections": "^3.10.4",
"@react-stately/combobox": "^3.8.1",
"@react-stately/list": "^3.10.2",
"@react-stately/toast": "^3.0.0-beta.5",

🖥️ Steps to Reproduce

• Create or use an existing component that leverages the useComboBox hook, in combination with useButton, usePopover, Overlay, useListBox, and useOption.
• Interact with the combo box/popover by selecting an option from the list.
• The error occurs thereafter and the entire application crashes.

Version

individual packages installed (see context)

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[kimskovhusandersen]

Sorry, it's still happening, could we re-open it again please?

[snowystinger]

Sure thing, can you provide a codesandbox or stackblitz which reproduces the error?

[kekswar]

Have same error.
Maybe this will help: stackblitz example. Resize devtools after first load.

[snowystinger]

I only see the issue when it's inside the stackblitz iframe. If I pop out to a new window, I cannot reproduce it.

Just to confirm, the same code in your application causes the issue as well? so we can rule out this being an error in stackblitz itself since that's the only place I'm seeing it?

Are you using any other resize observer anywhere else in your application?

[tidusia]

Hi ! Thanks for all the work done on React Aria, we based our entire company design system on it and it works perfectly 👌

I wanted to give a hint on this issue that we encountered as well, and strangly enough, this "ResizeObserver loop completed with undelivered notifications" error causes our Storybook test suite to fail (which is based on jest runner and playwright for in browser testing).

My hint : this issue only arise when the position of the popover have to be replaced due to having not enough space.

So, if I :

• reduce the text of the MenuItem
• change the "placement" prop to place the popover at the opposite of the border of the screen
  then the issue is gone, no more error nor failling tests.

I hope this hint can help fix the underlying issue 🙏

[kekswar]

I only see the issue when it's inside the stackblitz iframe. If I pop out to a new window, I cannot reproduce it.

Just to confirm, the same code in your application causes the issue as well? so we can rule out this being an error in stackblitz itself since that's the only place I'm seeing it?

Are you using any other resize observer anywhere else in your application?

I update my example. Now you can see the error in a pop out window. Try resize the window quickly :)