[RAC] ComboBox popover with `triggerRef` is not positioned correctly on SSR about react-spectrum HOT 5 OPEN

Definitely strange, I don't see anything particularly different between the Group and the Input/Button elements that would cause this difference in behavior, will need to dig into what in useOverlayPosition is causing this positioning.

from react-spectrum.

For now I'm using this workaround.

const groupRef = React.useRef<HTMLDivElement>(null);
const triggerRef = React.useRef<HTMLDivElement | null>(null);

React.useLayoutEffect(() => {
  if (groupRef.current) {
    triggerRef.current = groupRef.current;
  }
}, []);

<ComboBox>
  <Group ref={groupRef}>
    ...
  </Group>
  <Popover triggerRef={triggerRef}>
      ...
  </Popover>
</ComboBox>

from react-spectrum.

Seems to have something to do with what runs on the server vs what runs on the client. I don't know enough about Remix, but does it work if you turn it into a client only component? (don't know if that exists in Remix)

From what I can tell though, this isn't something related to RAC

from react-spectrum.

@snowystinger Remix doesn't have server components. I tested also with Next.js that has server components and added 'use client' directive. It wouldn't work without it anyways, and the same issue is there too. Here's the link.

https://stackblitz.com/edit/stackblitz-starters-xjutyc?file=app%2FComboBox.tsx

As @LFDanLu mentioned, the strange thing is that it works fine when you set the trigger element as the Button for example. That's why it feels like a RAC issue.

from react-spectrum.

It's odd because Group is even more simple than Button, so I can't imagine why the ref is not defined once you get to that first effect.

I asked about the server vs client because I saw this https://remix.run/docs/en/main/discussion/server-vs-client#splitting-up-client-and-server-code

I don't know how their magic splitting works.

It's good that it happens in Next.js though, I think we can go back to suspecting RAC.

I thought maybe the order in which renders/refs/effects ran in children/siblings might be a culprit, but then I would expect this to affect non-SSR as well. I also would expect that adding a wrapper around Group would solve it, and that didn't do anything. So I think we can rule that out as well.

from react-spectrum.