Material-ui-pickers: Selected value not always rendered inside TextField

[ArturKp]

Played around with the latest version on @material-ui/pickers but couldn't get any other locale than english to work perfectly. Found this weird issue on bigger screens where value is not correctly rendered.

Environment

| Tech | Version |
| -------------------- | ------- |
| @material-ui/pickers | 4.0.0-alpha.5 |
| material-ui | 4.9.11 |
| React | 16.13.1 |
| Browser | Chrome |
| Peer library | Moment 2.24.0 | |

Steps to reproduce

1. Set LocalizationProvider locale to anything other than "en"
2. Use wide screen, such that the input adornment is visible
3. Click on the input Important!
4. Open calendar
5. Choose date

Expected behavior

Input should show the selected value.

Actual behavior

Selected value is not shown.

• Re-sizing the screen displays the selected value and seems to "reset" the component
• Always seems to work on smaller screens
• Focusing the input before choosing a date seems to be important in reproducing this. Going straight to the calendar and choosing a date seems to work.

Live example

Codesandbox

[ArturKp]

Likely related issue: https://github.com/mui-org/material-ui-pickers/issues/1704

[oliviertassinari]

While the first concerning aspect of your demo seems to be that selecting a day doesn't close the popup, see the related discussion in #1651, the update of the input seems to have been solved on the next branch. The only issue I see when trying your codesandbox with the next branch is this warning

The mask "__/__/____" you passed is not valid for the format used L. Falling down to uncontrolled not-masked input.
in KeyboardDateInput (at DesktopWrapper.tsx:47)
in DesktopWrapper (at ResponsiveWrapper.tsx:41)
in ResponsiveWrapper (at makeWrapperComponent.tsx:70)
in WrapperComponent (at makePickerWithState.tsx:56)
in PickerWithState (at withDateAdapterProp.tsx:26)
in Anonymous (at makePickerWithState.tsx:74)
in Anonymous (at releases.tsx:31)
in App (at _app.tsx:40)
in MyApp

I wish we had codesandbox-ci configured to demonstrate it, we will have to wait for the next release. The last release was made 2 weeks ago, with 30 new commits, I think that we should consider making a new one.

[ArturKp]

Thanks for the quick reply. Also attempted to use the latest version locally in my project but ran into some obstacles and just went with alpha-5. Didn't even think to check how old the release actually is. New release would be nice 👍🏻

[oliviertassinari]

Hold on, let's keep it open, the warning is strange.

[dmtrKovalenko]

What’s strange in warning?

[oliviertassinari]

In the codesandbox, we don't provide a mask prop. It feels like it warns by default.

[dmtrKovalenko]

We have default mask for en-US locale. When you changing locale you need to pass new mask or it will fallback to the unmasked input and warning appears. What’s the problem?

P.S. en-US is default locale for all of available date libs

[oliviertassinari]

@dmtrKovalenko Should we introduce a new / update the existing warning for this logic? It feels that developers won't be able to figure the solution from the reported warning.

[dmtrKovalenko]

Ideas are welcome. As for me it is obvious, but sure thing it’s not if you ask it :)

[oliviertassinari]

Ok, I guess we will see based on user's feedback, once we put more exposure on the new version of the pickers :).

[hadasmaimon]

@oliviertassinari I got a warning, is it the same issue? or it is my mistake? or will I open a different issue?

The format is: dd MMM yyyy

This is the code:

The warning:

Tried to add mask="__ ___ ____"
but still got warning