Tooltip causing ResizeObserver issue

[ACHolmes]

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

[snowystinger]

There are a few things at work here and this is my best guess at the moment. Most notably reflow. Because the element is positioned absolutely with no assigned width, the tooltip first tries to fit into 0 width. This however causes there to be a width, so then it reflows to fit into that, and while it does so, it might briefly cause the collapse to 0 width again before taking on its new size and reflowing again. Causing this loop to repeat.

If you give the absolutely positioned element some constraints or set the tooltip to a certain size or possibly one of the other things you've identified, I think that is fine for now.

Looks like we have this issue in React Spectrum components as well https://codesandbox.io/p/sandbox/cool-payne-cfz7vx

[ACHolmes]

Gotcha, thanks for the quick response! One thing I would note is that you can cause the issue via flexbox rather than just with absolute positioning, e.g.
style={{ width: "100vw", display: "flex", justifyContent: "end", }}
causes the same issue as my original example - I'm no expert on reflow, so I don't know if this affects that hypothesis or not.

Here's both example sandboxes:
https://codesandbox.io/p/sandbox/tooltip-bug-absolute-w9kvx3
https://codesandbox.io/p/sandbox/tooltip-bug-flex-ggp7s7

[snowystinger]

Thanks, that does somewhat diminish my confidence in the theory.

The other idea I had this morning was that it was extending off the page and kept growing as we made room for it that way.
We could test this one pretty easily, I hope.

it's basically the same as this bit of code for setting the component to the top so it can layout vertically all in one go. We'd just want to set the left to 0 as well and then unset it after calculating the position.

react-spectrum/packages/@react-aria/overlays/src/useOverlayPosition.ts

Line 175 in 086ad31

overlay.style.top = '0px';

[ACHolmes]

That makes some sense to me, I'll have a closer look if I have time tomorrow.