SSR - Hydration mismatch on iPhone with decimals

[luixo]

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: JedWatson/react-select#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

[snowystinger]

Thanks for the issue.

I'm not sure what that other library has to do with us. They don't use React Aria from what I can tell.

Looks like they have suggested JedWatson/react-select#5859 (comment) a NoSSR component to workaround the issue for now.

How would you suggest we handle

Let user provide userAgent server-side to make client and server renders match

Would you like to propose a fix in a PR?

[luixo]

I'm not sure what that other library has to do with us. They don't use React Aria from what I can tell.

Ah, sorry, I thought it was an issue in react-spectrum repo

How would you suggest we handle

Through a provider.

Would you like to propose a fix in a PR?

Yes, but I need to understand which path are we going - provide SSR data or always fall back to the default when data is not available.