[DatePicker] Input value is cleared when closing the datepicker

[igor-serzhan]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Input value is cleared after open and close the datepicker dialog.

Expected behavior 🤔

Input value should stay the same

Steps to reproduce 🕹

Steps:

1. Open https://codesandbox.io/s/k860y9?file=/demo.js (official demo)
2. Type valid date in input (for example 03/03/2022)
3. Blur the input
4. Open Datepicker Dialog (click at the calendar icon)
5. Close Datepicker Dialog (just click outside the dialog or press 'Esc' button)
6. See that input value is empty

Context 🔦

https://codesandbox.io/s/k860y9?file=/demo.js

Your environment 🌎

environment from the official sandbox

[RedHeadphone]

I would like to fix this

[Abdullah0991]

^Up, facing same problem:

"dependencies": {
    "@date-io/dayjs": "^2.13.1",
    "@emotion/react": "^11.8.1",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.5.1",
    "@mui/lab": "^5.0.0-alpha.73",
    "@mui/material": "^5.5.1",
    "@reduxjs/toolkit": "^1.8.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-redux": "^7.2.6",
    "stylis": "^4.0.13",
    "stylis-plugin-rtl": "^2.1.1",
  }

[RedHeadphone]

I was searching for the fix, seems like you found out first :(

[yyq1025]

I was searching for the fix, seems like you found out first :(

@RedHeadphone Sorry, but you could help me to write some test cases if you want

[RedHeadphone]

test cases for DatePicker or usePickerState?

[remy90]

I think mui/material-ui#31929 may fix a related issue where:

• user selects a date with the picker
• user reopens the picker to change the year (which immediately changes the date in the input field)
• User closes the text field with onBlur/onAccept
• Result: input reverts to the previous year

It may be another test scenario worth adding...

[yyq1025]

test cases for DatePicker or usePickerState?

No need to write test cases now. I have to wait for maintainers to confirm the expected behaviors.

[yyq1025]

I think mui/material-ui#31929 may fix a related issue where:

• user selects a date with the picker
• user reopens the picker to change the year (which immediately changes the date in the input field)
• User closes the text field with onBlur/onAccept
• Result: input reverts to the previous year

It may be another test scenario worth adding...

Thanks for your summary. My pull request should fix #4469