adobe / adobe/react-spectrum

[RAC] ComboBox popover with `triggerRef` is not positioned correctly on SSR

Open
#6,524 6 comments 0 reactions 0 assignees View on GitHub
bug needs investigation Overlay Positioning Overlays ssr
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

ComboBox popover with `triggerRef` that points to a different element than the input, is positioned on top left of the page on initial page load in an SSR app.

### 🤔 Expected Behavior?

Popover to be positioned correctly on SSR too.

### 😯 Current Behavior

Popover is positioned on top left of the page on SSR.

### 💁 Possible Solution

_No response_

### 🔦 Context

For our project I need to add an optional icon and an arbitrary slot before the `Input`. To achieve this I use the `Group` component to wrap the elements, and add a `triggerRef` to `Popover`, that references the `Group` component to position the popover menu correctly.

This works fine on Storybook but when we use the component on Remix or Next.js, on initial load of the page, the popover is aligned to the top left of the page. When we navigate to another page and come back, it works.

### 🖥️ Steps to Reproduce

https://stackblitz.com/edit/remix-run-remix-feff8g?file=app%2Froutes%2Fabout.tsx,app%2Froutes%2F_index.tsx

1. Load the page
2. Open ComboBox menu, and the menu is positioned incorrectly
3. Go to "About" page
4. Go to "Home" page
5. Open ComboBox and the menu is positioned correctly.

### Version

React Aria Components v1.2.1

### What browsers are you seeing the problem on?

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

MacOS

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.