[pickers] Year placeholder on Spanish and Portuguese switches to YYYY on focus

[genepaul]

Steps to reproduce

Link to live example: https://codesandbox.io/p/devbox/c3cn8j?migrateFrom=4jx2y2

Steps:

1. In the live example, click on the DatePicker box to focus it.
2. Notice that the year placeholder switches from AAAA (correct) to YYYY (incorrect)

Current behavior

When focusing a date field that is translated into a language that uses A for the year abbreviation (año or ano for example), the placeholder changes from AAAA to YYYY.

Expected behavior

It should not change - should stay AAAA.

Context

No response

Your environment

npx @mui/envinfo

``` System: OS: macOS 14.3 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 374.11 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 14.20.0 - ~/.nvm/versions/node/v14.20.0/bin/node Managers: Homebrew: 4.2.7 - /usr/local/bin/brew pip3: 23.3.1 - /usr/local/bin/pip3 RubyGems: 3.0.3.1 - /usr/bin/gem Utilities: Git: 2.42.1 - /usr/local/bin/git Curl: 8.4.0 - /usr/bin/curl Servers: Apache: 2.4.58 - /usr/local/bin/apachectl Virtualization: Docker: 20.10.20 - /usr/local/bin/docker IDEs: VSCode: 1.87.2 - /usr/local/bin/code Vim: 9.0 - /usr/bin/vim Xcode: /undefined - /usr/bin/xcodebuild Languages: Bash: 3.2.57 - /bin/bash Java: 11.0.19 - /usr/bin/javac Perl: 5.30.3 - /usr/bin/perl PHP: 8.3.1 - /usr/local/bin/php Python3: 3.11.6 - /usr/local/bin/python3 Ruby: 2.6.10 - /usr/bin/ruby Databases: MySQL: 14.2 - /usr/local/bin/mysql SQLite: 3.43.2 - /usr/bin/sqlite3 Browsers: Chrome: 123.0.6312.87 Edge: 123.0.2420.65 Safari: 17.3 ``` Using Chrome.

Search keywords: year placeholder spanish portuguese Order ID: 83479

[LukasTy]

@genepaul Could you please record a video of this behavior? 🤔 I've checked your demo and the year placeholder always remains as AAAA for me. 🙈

[genepaul]

I feel like I'm going crazy. Right before I submitted this issue I was seeing the behavior. Then after I checked the link, I saw that it did not change. So there must be something strange with how I set it up. An interesting note: If I remove the localeText prop on the LocalizationProvider, I see the opposite behavior: it starts with YYYY then switches to AAAA:

And just to prove I'm not crazy, here's a gif of the error I'm seeing in my local project:

In that project, I'm getting the browser language (window.navigator.language) and dynamically importing the locale needed and setting it in a useEffect. You can see in this gif that the behavior seems inconsistent. Sometimes it switches and sometimes it doesn't.

[genepaul]

Ok. This is definitely some race condition in the internal state of the component. I'm seeing this behavior after updating the code in codesandbox - so you won't see the update when loading it fresh. It seems that some internal state gets updated when I pass localeText (or not), and it holds on to that between state updates. But if you fully refresh, it will work consistently.

This is probably why I'm seeing the behavior more prevalently in my code, because I am dynamically importing and updating the prop after first render. My app has a requirement to support up to 34 languages, and I'd rather not import all of them into my bundle, so I'm trying to figure out the best way to handle localization of my component without importing all possible languages.

[michelengelen]

@LukasTy should we add this to the board?