Material-ui-pickers: DateTimePicker value update not reflected in picker

[yinonby]

Environment

| Tech | Version |
| -------------------- | ------- |
| @material-ui/pickers | 3.1.1 |
| material-ui | 4.1.1 |
| React | 16.8.6 |
| Browser | chrome |
| Peer library | [email protected] | |

Steps to reproduce

• Store the value of the date in this.state
• Render the picker
• Programmatically change the value of date, using setState
• Print the value right before render() returns the element to render
• New value is printed
• The picker displays the old value

Expected behavior

DateTimePicker should display the new value, and not the old one.

Actual behavior

DateTimePicker value is changed programmatically, render() function is called, but the calendar keeps displaying the last selected date;

Live example

https://codesandbox.io/embed/react-example-rxbnp

Open the first picker, change the date, click 'ok', then the second one opens up, but shows the old date.

[dmtrKovalenko]

You must not be able to update state when datepicker open

[yinonby]

Actually the picker is closed (but rendered) when I update the state. I update both the date value and the 'open' boolean to true.
Then it is re-rendered due to the change in state, but keeps using the old value.

[dmtrKovalenko]

Can you provide the codesandbox repdouction?
But seems like I understand what do you mean. There is a line of code where we updating inner state when new one is passed from the parent.

[yinonby]

Seems like you are right. When I disable the part that opens the picker upon the change (so the only change to the state is the date), and then I open the picker manually, it looks like the new date has been accepted (while it was closed).

Is this expected behavior? Can we change it so that the check is against the current 'open' state of the picker, and not the updated one from the props?

[yinonby]

Here is a live sandbox:
https://codesandbox.io/embed/react-example-rxbnp

Open the first picker, change the date, click 'ok', then the second one opens up, but shows the old date.

[volere]

I've run into this same issue. Anything I can do to help figure it out?

[TheLogan]

I have the same issue, though on 2.2.4 (I'm not yet ready to update to mui 4.x).
The datepicker is closed, I change the date programmatically, I click on the datepicker to open it, and it shows the old date. I close the datepicker, and as it's closing I see it update to the new date.

[dmtrKovalenko]

Already fixed in some version

[adamfairweather32]

This issue is still occuring in the latest version of the material ui date picker and has not been fixed

[Linh-Vo]

still occurring

[Mohammed-Mamoun98]

https://stackoverflow.com/questions/51324892/unable-to-get-material-ui-datepicker-date-on-the-first-change
i guess the initial date should be in a specific format.

[bkstorm]

same issue with version 3.2.10. We should reopen this issue.

[pasca15]

I have the same issue as well with version 3.2.10

[oliviertassinari]

v3 is no longer supported, we are focusing on v4 now. If you could provide a reproduction with v4.0.0-alpha it would be perfect.

[pasca15]

Updated to version 4: https://codesandbox.io/s/young-breeze-g6xxy?fontsize=14&hidenavigation=1&theme=dark

[oliviertassinari]

@pasca15 Thanks for the reproduction. Shouldn't it be a new issue? It looks like a duplicate of #1709.

[pasca15]

Yep. That's very similar. Even with the autoOk, the selected date can't be passed to the textfield