SSR - Hydration mismatch on iPhone with decimals
- 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
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