[pickers][DateTimePicker] Controlled DateTimePicker does not always show current Date state being passed in

[CciMichael]

Steps to reproduce

Link to live example: Codesandbox Link

When trying to implement a controlled DateTimePicker with react state, the picker does not reflect the actual state (for example if you wanted to implement some extra validation in the onChange function) unless you manually change the state being passed into it, forcing it to re-render.

I created an example of what I mean here, basically I want to have 2 separate DateTimePickers, one with a "Start" date and one with an "End" date. If the user types in a "Start" date AFTER the "End" Date, i want to force the state to revert to the last correct date, however, unless you change the date object to be different from what it is currently set at (as you can see me doing in the example with the second flipping), then the picker will reflect a time that is not what the state being passed in is at. (you can uncomment the // return moment(startDateVal); to see what I mean in both examples)

Current behavior

When trying to implement a controlled DateTimePicker with react state, the picker does not reflect the actual state (for example if you wanted to implement some extra validation in the onChange function) unless you manually change the state being passed into it, forcing it to re-render.

Expected behavior

The DateTimePicker should reflect the date state of the value={} being passed in to allow custom validation

Context

I created an example of what I mean here, basically I want to have 2 separate DateTimePickers, one with a "Start" date and one with an "End" date. If the user types in a "Start" date AFTER the "End" Date, i want to force the state to revert to the last correct date, however, unless you change the date object to be different from what it is currently set at (as you can see me doing in the example with the second flipping), then the picker will reflect a time that is not what the state being passed in is at. (you can uncomment the // return moment(startDateVal); to see what I mean in both examples)

Your environment

N/A, use the codesandbox

Search keywords: [pickers][DateTimePicker]

[michelengelen]

Hey @CciMichael, thanks for bringing this up!

I understand there's a consistency issue between the date fields and the date picker. Currently, the fields show an error for invalid dates, while the picker disables them. It's a bit tricky because even with your example, there's a brief flash of the invalid field state before the component updates

I'm not sure if we can achieve the behavior you're looking for with our current setup. @LukasTy might have some ideas on how to approach this. Let's see what he thinks!

[michelengelen]

We do this to optimize performance by avoiding unnecessary re-renders, primarily through the areDatesEqual method in the value manager. Right @LukasTy?

[LukasTy]

@michelengelen This looks like a duplicate of #10424.
@CciMichael thank you for a great example.
I've tested a native date input and it does not have this behavior.

We need to re-evaluate if and when the equality check is needed because this behavior is a regression compared to previous versions and is also inconsistent compared with other components.

@flaviendelangle Do you recall if the areValuesEqual check was needed in so many places? 🤔

[LukasTy]

I'm closing this issue as a duplicate, we can keep the discussions in #10424.

[github-actions]

⚠️ 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.

@CciMichael: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.