SSR - Hydration mismatch on iPhone with decimals
Author: luixoCreated Jul 7, 2025Updated Sep 16, 2026
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:
<React hydration error message>
<input
...otherProps
+ inputMode="decimal"
- inputMode="numeric"
+ aria-roledescription={null}
- aria-roledescription="Number field"
>Possible Solution
- Let user provide
userAgentserver-side to make client and server renders match - Default first render to
isIphone() === falsewhile 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
- Create a component with
InputwithformatOptions={{ maximumFractionDigits: 2 }} - Render this component with SSR (e.g. vite, next.js)
- 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
Source: adobe/react-spectrum