[pickers] Invalid state is incorrectly cleared
Steps to reproduce
Steps:
- Open this link to live example: https://mui.com/x/react-date-pickers/date-picker/#uncontrolled-vs-controlled-value
- Enter an invalid date - for example, type "00" on the keyboard to set the month to 0.
- Using the keyboard, move the cursor to the year field.
- Press up or down on the keyboard to change the year field spin button.
Current behavior
The invalid field isn't preserved: If the date picker is already marked invalid and the user changes it, it clears the invalid state. On the next edit, it correctly sets the invalid state. As a result, the field flashes red and blue as you hold the up or down keys. Both the controlled and uncontrolled fields demonstrate this behavior.
Expected behavior
The field remains marked invalid because its contents remain invalid.
Context
No response
Your environment
npx @mui/envinfo
Using Chrome
System:
OS: macOS 15.4.1
Binaries:
Node: 22.15.0 - ~/.nvm/versions/node/v22.15.0/bin/node
npm: 10.9.2 - ~/.nvm/versions/node/v22.15.0/bin/npm
pnpm: Not Found
Browsers:
Chrome: 136.0.7103.114
Edge: 136.0.3240.76
Safari: 18.4
npmPackages:
@emotion/react: 11.14.0
@emotion/styled: 11.14.0
@mui/core-downloads-tracker: 7.1.0
@mui/icons-material: 7.1.0
@mui/lab: 7.0.0-beta.12
@mui/material: 7.1.0
@mui/private-theming: 7.1.0
@mui/styled-engine: 7.1.0
@mui/system: 7.1.0
@mui/types: 7.4.2
@mui/utils: 7.1.0
@mui/x-date-pickers: 8.4.0
@mui/x-internals: 8.4.0
@mui/x-tree-view: 8.4.0
@types/react: ^18.3.20 => 18.3.20
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
typescript: ^5.8.3 => 5.8.3
Search keywords: date picker invalid
Hey @joshkel and thanks for opening an issue for this. I can confirm this and will move it to the board.
The reason this switches back and forth is that the value is changing from null to a date that is invalid.
This looks like a regression introduced by https://github.com/mui/mui-x/pull/17816. 🙈
I wonder if this is related to an issue I'm seeing locally using the Luxon Adapter... When I have a UI with a valid date and then select any field, month, day or year and after using the keyboard to change the value, I hit the delete key to remove the number and restore it back to the placeholder. In that situation, instead of getting an invalid DateTime object I just receive null. This is breaking things, since I wrote code to cause a blur of the field to detect an invalid DateTime and then set the value to null. In fact if you do this on the demo page it leaves the UI as follows:
It seems like setting a null DateTime object value does nothing to reset the field back to the original MM/DD/YYYY view like it used to
@michelengelen @LukasTy Why not rollback the changes to https://github.com/mui/mui-x/pull/17816 until it can be reimplemented without the issue?
We have a lot of problems that seems to have been introduced after that change. Have now reverted to 8.3.1. When you type a date in more recent versions whenever you type the day, if the day starts with 0 the full date is cleared. This is most visible when using format YYYY-MM-DD so you type 2025-01-0 and when the last 0 is typed the other inputs are cleared.
Another issue is that 2099 seems to be the highest year possible. Typing e.g. 2200 will result in invalid state.
I'm also seeing issues with the date component returning "Invalid Date" and then being unable to correct the issue since it seems to break the internals of the input. It doesn't seem much better in version 8.3.1. I initially noticed this recently on 8.9.0.
My issue happens when running as an iPad User Agent in Safari:
- Enter
1for the month - Click on the year placeholder and enter all
0000zeros. - Try to fix your date by adding a valid day and year
We're also having this issue with our datepickers. Is there any estimate as to when this will be fixed? Maybe a temporary workaround?
Any update here? This issue is a big headache for our data team who work with a lot of date data. Aside: I asked support to have this tagged as "support: premium standard" same as #18401 and they said they would notify the dev team, but nothing has been done here in months.
This issue has been selected for development, so someone from the team is actively looking into this. State management is a sensible topic in the pickers so we try to be as careful as possible with it.
This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.
@joshkel Thanks again for creating this issue! If you have a moment, we would love to hear your thoughts on how we handled it with this short feedback form.