mui-x icon indicating copy to clipboard operation
mui-x copied to clipboard

[pickers] Invalid state is incorrectly cleared

Open joshkel opened this issue 7 months ago • 5 comments

Steps to reproduce

Steps:

  1. Open this link to live example: https://mui.com/x/react-date-pickers/date-picker/#uncontrolled-vs-controlled-value
  2. Enter an invalid date - for example, type "00" on the keyboard to set the month to 0.
  3. Using the keyboard, move the cursor to the year field.
  4. 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

joshkel avatar May 22 '25 15:05 joshkel

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.

michelengelen avatar May 23 '25 08:05 michelengelen

This looks like a regression introduced by https://github.com/mui/mui-x/pull/17816. 🙈

LukasTy avatar May 23 '25 12:05 LukasTy

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:

Image

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

heath-freenome avatar Jun 12 '25 19:06 heath-freenome

@michelengelen @LukasTy Why not rollback the changes to https://github.com/mui/mui-x/pull/17816 until it can be reimplemented without the issue?

heath-freenome avatar Jun 12 '25 19:06 heath-freenome

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.

cattermo avatar Jun 16 '25 12:06 cattermo

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:

  1. Enter 1 for the month
  2. Click on the year placeholder and enter all 0000 zeros.
  3. Try to fix your date by adding a valid day and year

pweisensee avatar Jul 30 '25 00:07 pweisensee

We're also having this issue with our datepickers. Is there any estimate as to when this will be fixed? Maybe a temporary workaround?

BatshevaOz avatar Sep 30 '25 11:09 BatshevaOz

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.

blakewats avatar Oct 17 '25 08:10 blakewats

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.

michelengelen avatar Oct 20 '25 11:10 michelengelen

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.

github-actions[bot] avatar Nov 06 '25 09:11 github-actions[bot]