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.

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

[fields][DateField] fails to accept '22' as day keybord input in FR locale with format Do MMM YYYY #12678

Open
pcourant opened this issue Apr 4, 2024 · 2 comments · May be fixed by #12688
Open
Assignees
Labels
bug 🐛 Something doesn't work component: pickers This is the name of the generic UI component, not the React module! i18n internationalization

Comments

@pcourant
Copy link

pcourant commented Apr 4, 2024

Steps to reproduce

Link to live example: Stackblitz live demo

Steps:

  1. Select the FR locale from dayjs in the LocalizationProvider
  2. Give the DateField the format Do MMM YYYY
  3. Enter with keyboard '22' for the day of the month.
  4. DateField fails to accept it.

Current behavior

DateField fails to accept '22' as a keyboard input.

Expected behavior

DateField accepts 22 and moves to month selection

Context

No response

Your environment

No response

Search keywords: format Do, keyboard input 22 in locale FR

@pcourant pcourant added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Apr 4, 2024
@michelengelen
Copy link
Member

I can confirm that the input of 22 does not work, all others work though.
@pcourant thanks for raising this. I will add this to the board!

@michelengelen michelengelen added bug 🐛 Something doesn't work i18n internationalization component: pickers This is the name of the generic UI component, not the React module! and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Apr 4, 2024
@michelengelen michelengelen changed the title [fields] DateField fails to accept '22' as day keybord input in FR locale with format Do MMM YYYY [fields][DateField] fails to accept '22' as day keybord input in FR locale with format Do MMM YYYY Apr 4, 2024
@flaviendelangle
Copy link
Member

I think I got the problem.
Do is the format to display the day of the month with as 1st / 2nd etc...
So it is a section of content type digit-with-letter

The sections of content type do not have a leading zero.
BUT in the french locale, the ordinal is only added for 1 (not sure why, 2ème exists in french...)

  ordinal: (n) => {
    const o = n === 1 ? 'er' : ''
    return `${n}${o}`
  }

So we end up in a scenario where we render 2, not 02 or 2ème.
This is a classic "onChange is not fired because you press 2 while selecting 2".

The only solution I see is to add the leading zero. Not sure exactly how complex this would be, always adding a leading zero on sections with content type digit-with-letter would clearly be controversial...
If we want to only add it when there is no ordinal, then we need to stop using section.hasLeadingZerosInInput and instead check if a section should have a leading zero based on its current value.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: pickers This is the name of the generic UI component, not the React module! i18n internationalization
Projects
None yet
3 participants