Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
liamb13 opened this issue Dec 19, 2023 · 2 comments · May be fixed by #6657
Open

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

liamb13 opened this issue Dec 19, 2023 · 2 comments · May be fixed by #6657

Comments

@liamb13
Copy link

liamb13 commented Dec 19, 2023 •
edited
Loading

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
Copy link
Member

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
Copy link
Author

liamb13 commented Dec 19, 2023

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:
image

  • 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

@ryo-manba ryo-manba mentioned this issue Jun 22, 2024
Closed
This was referenced Jun 30, 2024
Merged
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: remove autoCapitalize to prevent mismatch warning ryo-manba/react-spectrum
2 participants
@reidbarber @liamb13