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

  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