[RAC] Refs in collection components point to their "hidden" node after SSR

[florianloechle]

Provide a general summary of the issue here

We noticed that in one of our production apps (nextjs) after SSR hydration, the refs inside collection components do not point to their actual rendered DOM elements but to the rendered nodes in the hidden tree. In the following example, the groupRef is broken after the initial hydration, causing the popover to be positioned incorrectly. This is a significant issue for us because refs on inputs and buttons are also broken.

function MyComboBox<T extends object>({
  label,
  description,
  errorMessage,
  children,
  ...props
}: MyComboBoxProps<T>) {
  const groupRef = React.useRef(null); // this ref is pointing to the hidden node after SSR
  return (
    <ComboBox {...props}>
      <Label>{label}</Label>
      <div ref={groupRef} className="my-combobox-container">
        <Input />
        <Button>▼</Button>
      </div>
      <Popover triggerRef={groupRef}>
        <ListBox>{children}</ListBox>
      </Popover>
    </ComboBox>
  );
}

Note: This does not happen when the component is client rendered only.

🤔 Expected Behavior?

All refs should point to their actually rendered dom element and not their hidden counterpart.

😯 Current Behavior

Refs above the collection point to their hidden node after server-side-rendering the component.

💁 Possible Solution

🔦 Context

No response

🖥️ Steps to Reproduce

https://stackblitz.com/edit/stackblitz-starters-cz1x8k?file=app%2Fbroken-ref-combobox.tsx

Version

1.4.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

Could reproduce this on safari, chrome and edge

What operating system are you using?

MacOS 14.6.1

🧢 Your Company/Team

🕷 Tracking Issue

[snowystinger]

The Group isn't a collection component nor is it in the collection. Can you provide a stackblitz reproduction? That will help us to debug what's going on.

[florianloechle]

Sure, here it is: https://stackblitz.com/edit/stackblitz-starters-cz1x8k?file=app%2Fbroken-ref-combobox.tsx

Opening the ComboBox in this example shows incorrect popover positioning because the groupRef, which is used as the triggerRef for the popover, is pointing to an element that is not in the document. This also happens with refs that are applied to other elements inside the ComboBox.

Just to make it totally clear, this issue only happens after the initial hydration in SSR not when the component is initially rendered on the client.

[alexasselin008]

I am facing the same issue in my NextJs website. The reproduction sandbox provided by @florianloechle showcase the issue really well.

For my usecase, i'm allowing an Icon as a prefix to my ComboBox. So i need to recalculate the Popover width, so it matches the trigger's size.

    const groupRef = useRef<HTMLDivElement>(null);

    // Make menu width match trigger width.
    const [triggerWidth, setTriggerWidth] = useState<string | null>(null);

    const onResize = useCallback(() => {
        if (groupRef.current) {
            setTriggerWidth(groupRef.current.offsetWidth + "px");
        }
    }, [groupRef]);

    useResizeObserver({
        ref: groupRef,
        onResize: onResize
    });

...

    <ComboBox {...props}>
        <div ref={groupRef} className="my-combobox-container">
            {prefixIcon}
            <Input />
            <Button>▼</Button>
        </div>
        <Popover triggerRef={groupRef} style={{width: triggerWidth}}>
            <ListBox>{children}</ListBox>
        </Popover>
    </ComboBox>

triggerRef is referencing an element that is not connected to the Document

So the width of the element is 0, and the popover doesn't show at the expected location, since the ref points to an object not in the document

[snowystinger]

Sorry, looks like this issue fell off my radar. Now that I'm looking at it again though, why are you trying to attach the triggerRef to the groupRef? why not just leave it off and just use the --trigger-width to set the width https://react-spectrum.adobe.com/react-aria/ComboBox.html#popover-1
If you search the page for --trigger-width you'll see more information about it.

[alexasselin008]

Currently, RAC calculates --trigger-width using the left side of the input and the right side of the button:

let minX = buttonRect ? Math.min(buttonRect.left, inputRect.left) : inputRect.left;
let maxX = buttonRect ? Math.max(buttonRect.right, inputRect.right) : inputRect.right;
setMenuWidth((maxX - minX) + 'px');

This works for the standard input + button layout. However, in my case, I also have an icon on the left of the input, and this setup breaks the usability of --trigger-width. Additionally, I need the Popover to be positioned relative to the entire group's position (icon, input and button), rather than just the input.

Here’s an example of my code:

<ComboBox>
    <Label>Favorite Animal</Label>
    <div className="bg-white">
        🚨🚨🚨
        <Input className="outline-0"/>
        <Button>▼</Button>
    </div>
    <Popover className="bg-white" style={{ width: 'var(--trigger-width)' }}>
        <ListBox>
            <ListBoxItem>Aardvark</ListBoxItem>
            <ListBoxItem>Cat</ListBoxItem>
            <ListBoxItem>Dog</ListBoxItem>
            <ListBoxItem>Kangaroo</ListBoxItem>
            <ListBoxItem>Panda</ListBoxItem>
            <ListBoxItem>Snake</ListBoxItem>
        </ListBox>
    </Popover>
</ComboBox>

In this case, I want the Popover to match the width of the entire group (icon + input + button) and position itself relative to the group. However, using --trigger-width as calculated by RAC does not meet this requirement, resulting in this layout:

---

To address this, I tried attaching a ref to the group container and using it as the triggerRef for the Popover:

const triggerRef = useRef<HTMLDivElement>(null);

return (
    <ComboBox>
        <Label>Favorite Animal</Label>
        <div ref={triggerRef} className="bg-white">
          🚨🚨🚨
          <Input className="outline-0" />
          <Button>▼</Button>
      </div>
      <Popover triggerRef={triggerRef} className="bg-white"  style={{ width: 'var(--trigger-width)'}}>
            <ListBox>
                <ListBoxItem>Aardvark</ListBoxItem>
                <ListBoxItem>Cat</ListBoxItem>
                <ListBoxItem>Dog</ListBoxItem>
                <ListBoxItem>Kangaroo</ListBoxItem>
                <ListBoxItem>Panda</ListBoxItem>
                <ListBoxItem>Snake</ListBoxItem>
            </ListBox>
        </Popover>
    </ComboBox>
);

However, as soon as I attach a ref to the group, I encounter the issue described by @florianloechle: after SSR hydration, the refs within collection components no longer point to the correct rendered DOM elements but instead point to nodes in the hidden tree. This results in the Popover floating at the top-left corner, as seen here:

I’ve provided a repro case here: StackBlitz

[nwidynski]

@alexasselin008 Any reason you can't use pseudo elements for these icons? Unfortunately var(--trigger-width) is calculated based on the input and button rects, meaning a change of triggerRef will not have an impact on that.

[alexasselin008]

@nwidynski Since i'm building my Design System on top of RAC, i want to give the flexibility to my user to add text or icons in front of the input. Since the content isn't know ahead of time, i can't really use pseudo elements for that purpose.

[nwidynski]

@alexasselin008 Got it. You should be able to make it work with observing the ref yourself then, similar to what you already commented out. Here is an example, which will start working once the changes in #7663 are shipped.

Just be aware that adding icons and text as adjacent elements is not supported out of the box and may disrupt screen reader behavior, if not hooked up properly to aria-labelledby of the input. In general I would recommend against it or hide these elements from the accessibility tree at the very least.