TimeField: Warning: Prop autoCapitalize did not match. Server: "none" Client: "off"

[liamb13]

Provide a general summary of the issue here

In NextJS, TimeField is having an issue with autoCapitalize.

This then leads to Error: Text content does not match server-rendered HTML.

🤔 Expected Behavior?

autoCapitalize isn't even a prop for TimeField so unsure how this is occuring?

😯 Current Behavior

Warning: Prop `autoCapitalize` did not match. Server: "none" Client: "off"
div
$cfa347761f172638$var$EditableSegment@webpack-internal:///(app-pages-browser)/./node_modules/@react-spectrum/datepicker/dist/import.mjs:195:46
$cfa347761f172638$export$6388987c5223b54e@webpack-internal:///(app-pages-browser)/./node_modules/@react-spectrum/datepicker/dist/import.mjs:170:61
div
$d2bb88c82604b25f$export$34dc4cfa15ead1@webpack-internal:///(app-pages-browser)/./node_modules/@react-spectrum/datepicker/dist/import.mjs:216:118
div
div
div
$79348162c55d687f$var$Input@webpack-internal:///(app-pages-browser)/./node_modules/@react-spectrum/datepicker/dist/import.mjs:324:66
div
div
$b7ca5b4454a2009d$var$Field@webpack-internal:///(app-pages-browser)/./node_modules/@react-spectrum/label/dist/import.mjs:460:88
$beaeefa091999363$var$DatePicker@webpack-internal:///(app-pages-browser)/./node_modules/@react-spectrum/datepicker/dist/import.mjs:849:89
div
ProviderWrapper@webpack-internal:///(app-pages-browser)/./node_modules/@react-spectrum/provider/dist/import.mjs:211:49
$f57aed4a881a3485$export$178405afcd8c5eb@webpack-internal:///(app-pages-browser)/./node_modules/@react-aria/overlays/dist/import.mjs:893:34
$1051245f87c5981d$export$8214320346cf5104@webpack-internal:///(app-pages-browser)/./node_modules/@react-spectrum/utils/dist/import.mjs:211:74
$18f2051aff69b9bf$export$a54013f0d02a8f82@webpack-internal:///(app-pages-browser)/./node_modules/@react-aria/i18n/dist/real-module.mjs:164:50
$7167f8da3cce35e4$var$Provider@webpack-internal:///(app-pages-browser)/./node_modules/@react-spectrum/provider/dist/import.mjs:147:23
Date

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

"use client"

import { Provider, defaultTheme, TimeField } from "@adobe/react-spectrum"

export default function Page() {
  return (
    <Provider theme={defaultTheme} locale="en">
      <TimeField label="Date" />
    </Provider>
  )
}

codesandbox link

Version

3.32.2

What browsers are you seeing the problem on?

Firefox

If other, please specify.

No response

What operating system are you using?

Mac

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[reidbarber]

This is happening here:

react-spectrum/packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx

Lines 54 to 57 in 8ad0c43

	let {segmentProps} = useDateSegment(segment, state, ref);
	return (
	<div
	{...segmentProps}

react-spectrum/packages/@react-aria/datepicker/src/useDateSegment.ts

Line 374 in 8ad0c43

autoCapitalize: isEditable ? 'off' : undefined,

but I'm not sure why it would be "none" on the server.

[liamb13]

I believe it should be set to none, went all around the web looking for answers.

Latest doc I could find: https://developer.apple.com/documentation/uikit/uitextautocapitalizationtype

Constants
case none
Specifies that there is no automatic text capitalization.
case words
Specifies automatic capitalization of the first letter of each word.
case sentences
Specifies automatic capitalization of the first letter of each sentence.
case allCharacters
Specifies automatic capitalization of all characters, such as for entry of two-character state abbreviations for the United States.

Additional resources:
https://stackoverflow.com/questions/13284323/how-can-i-stop-auto-capitalization-in-a-html-text-input-field-on-an-android-sams

Although, now I'm even more confused:

• Safari has "off"
• Chrome has "off"
• Firefox has "none"

I don't even think the prop should exist on a Time Field, with numeric inputs, autocapitalisation doesn't do anything anyway

[snowystinger]

FYI, created a bug against FF here https://bugzilla.mozilla.org/show_bug.cgi?id=1906555

I don't even think the prop should exist on a Time Field, with numeric inputs, autocapitalization doesn't do anything anyway

This isn't quite true, the editable segments can include non-numeric fields such as AM/PM. I don't recall if there are any others which are editable.

Since we still control the capitalization for that field though, we should still be ok to remove it unless someone thinks of another field like AM/PM where we don't.

[liamb13]

This isn't quite true, the editable segments can include non-numeric fields such as AM/PM. I don't recall if there are any others which are editable.

Oh of course! My bad.