adobe / adobe/react-spectrum

Tooltip causing ResizeObserver issue

Open
#7,017 6 comments 0 reactions 0 assignees View on GitHub
bug needs investigation
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

Placing a react-aria-components Tooltip by the right side of the window can cause ResizeObserver errors in rare circumstances.

Hit `ResizeObserver loop completed with undelivered notifications` errors, or if suppressed, the tooltip will re-render several times, each time moving closer to its final (expected) position. I have only been able to reproduce this in one very unusual configuration, but it just happens to be the one that our Storybook runs in. As such, we don't expect this to be an issue for our application, but it is a problem when showing the component in our Storybook.

### 🤔 Expected Behavior?

Tooltip should immediately render in the correct location.

### 😯 Current Behavior

In our storybook, the tooltip re-renders many (e.g. 30+) times until it settles into its final position, each time throwing an error into the console. When trying to reproduce locally, it just throws an error immediately. The code sandbox link displays the same behavior as Storybook, except without the console errors.

### 💁 Possible Solution

Seems like an issue with the flex and margin conflicting somehow. This didn't seem to reproduce though when I just applied the same styling to two divs, so I imagine this is an issue as the body is a parent of the root div and therefore the resizeObserver isn't 'aware' of it to some extent? Provided it doesn't happen in any other circumstance, we should be able to work around this without issue.

### 🔦 Context

It's easy to workaround and doesn't seem like it should affect anything except our Storybook, which maybe we should just change its configuration.

### 🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/quizzical-bush-w9kvx3

### Version

"react-aria-components": "1.3.3"

### What browsers are you seeing the problem on?

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

macOS Sonoma 14.6.1

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by running the linked CodeSandbox in Chrome and inspect the react-aria-components Tooltip behavior when it is placed at the right side of the window. Reproduce the ResizeObserver errors or repeated repositioning, then verify that the tooltip settles immediately in its expected location without repeated renders or console errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.