adobe / adobe/react-spectrum

SSR - Hydration mismatch on iPhone with decimals

Open
#8,503 2 comments 0 reactions 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

On SSR there's no userAgent hence `isIphone` returns `false` on SSR creating a mismatch on hydration

### 🤔 Expected Behavior?

No hydration mismatch

### 😯 Current Behavior

```
[Error] A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:


```

### 💁 Possible Solution

1. Let user provide `userAgent` server-side to make client and server renders match
2. Default first render to `isIphone() === false` while rerendering on client with proper value

### 🔦 Context

If I click into input while client didn't hydrate yet - I always get `numeric` `inputMode` while actual `inputMode` after hydration is `decimal`.
(also, for some reason `inputMode` is not rerendered after hydration and `inputMode` is kept `numeric`, but that might not be react-aria scoped)

Also, there's another issue with SSR mismatch: https://github.com/JedWatson/react-select/issues/5859

### 🖥️ Steps to Reproduce

1. Create a component with `Input` with `formatOptions={{ maximumFractionDigits: 2 }}`
2. Render this component with SSR (e.g. vite, next.js)
3. Verify hydration mismatch error occurs

### Version

3.28.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

Research direction

Reproduce the mismatch with an Input using formatOptions={{ maximumFractionDigits: 2 }} in an SSR setup, then trace the isIphone check and the server/client handling of inputMode and aria-roledescription. Done means the server and client renders hydrate without the reported mismatch while preserving the expected decimal input behavior on iPhone.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.