adobe / adobe/react-spectrum

ResizeObserver loop completed with undelivered notifications

Open
#7,718 8 comments 2 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### 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_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.