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

[pcourant]

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

[michelengelen]

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!

[flaviendelangle]

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.