adobe / adobe/react-spectrum

Select Components used in Next.js will cause hydration error when LocalizedStringProvider's locale is not 'en'

Open
#7,366 0 comments 1 reaction 0 assignees View on GitHub
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

When use Select components with SSR and configured LocalizedStringProvider, it will give rise to a hydration error. It is relevant to SelectValue's placeholder.

### 🤔 Expected Behavior?

When set LocalizedStringProvider in Next.js and use some components, it shouldn't occur hydration error.

### 😯 Current Behavior

![image](https://github.com/user-attachments/assets/bd5ffc17-531e-4cd8-8440-a55bdc29a301)

### 💁 Possible Solution

If set Select's placeholder manually, it won't happened.

https://github.com/adobe/react-spectrum/blob/262cc758b8625002314d3574d3e5269aded7db6c/packages/react-aria-components/src/Select.tsx#L258-265

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

https://codesandbox.io/p/devbox/3mjhq3

use Next.js@14

### Version

"react-aria-components": "^1.4.1",

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

Microsoft Edge

### If other, please specify.

_No response_

### What operating system are you using?

Windows 11

### 🧢 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.