[pickers] Invalid state is incorrectly cleared

[joshkel]

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

[michelengelen]

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.

[LukasTy]

This looks like a regression introduced by #17816. 🙈

[heath-freenome]

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