`SSRProvider` creates issues with conditionally-rendered `OverlayContainer`s

🐛 Bug Report

When wrapping an app with SSRProvider, conditionally-rendered overlays don’t display correctly on the first display. If you show one based on state.isOpen from a trigger, the rendering is odd the first go. In my app’s case, the tooltip that should be rendered stays offscreen until mousing away, then the overlay flashes on and off in a second. Hovering over the same element again, the overlay displays correctly.

I created a sandbox that shows a similar problem. In the sandbox, the overlay shows, but the offset is being ignored.

These issues only show up when the app is wrapped in an SSRProvider. If the provider is removed, the overlays display as expected, but then the app complains about SSR and IDs.

I can side-step the issue by conditionally rendering the content inside the OverlayContainers, but this results in hundreds of portals sitting at the bottom of body.

🤔 Expected Behavior

I expect overlays to display correctly even when the app is wrapped in an SSRProvider.

😯 Current Behavior

Overlays exhibit odd behavior, sometimes not showing at all, or having odd positionProps.style values when wrapped with SSRProvider.

🔦 Context

I’m building a Remix app that would seemingly require SSRProvider and I have lots of menus and tooltips that need to be in OverlayContainers because of overflowing/scrolling parents.

💻 Code Sample

https://codesandbox.io/s/react-spectrum-template-forked-9io4uj?file=/src/index.js

🌍 Your Environment

Software	Version(s)
react-aria	3.19.0
react-stately	3.17.0
Chrome	103
macOS	12.5.1

[rk-lunar]

Update: 2022-09-09. After playing around today a bit more, I was able to get an OverlayContainer to conditionally render when triggered off of useMenuTrigger by moving the OverlayContainer inside the Popover component and then conditionally rendering the Popover. Works as expected.

Tried the same with my Tooltip, but no matter what I do, the Tooltip (using OverlayContainer) won’t position itself when conditionally rendered and the OverlayContainer is inside the conditionally rendered component. If I conditionally render inside the OverlayContainer, things look fine, but there are a hundred OverlayContainers in the body. Also, if I remove the SSRProvider, everything works as expected, but React Aria yells at me about IDs not matching.

I’ve made it work by manually handling the ref in a callback, and then calling updatePostion which is returned from the useOverlayPosition hook.

    const popoverRefCallback = useCallback(
      (ref: HTMLDivElement) => {
        popoverRef.current = ref;
        updatePosition();
      },
      [popoverRef, updatePosition]
    );

[rk-lunar]

We have the same problem, and i found this issue which might be related to the problem.

https://github.com/adobe/react-spectrum/issues/3293