Tooltip causing ResizeObserver issue
- 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
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