[pickers] onChange function triggers too frequently

[jbyomuhangi]

I'm trying to use the new feature in v4 of MUI that allows you to disable certain time ranges and I am facing an issue where the onChange function is triggering when it's not supposed to.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I have a controlled component that uses the Time Picker and receives it's value and change function from a parent component. When I click to open the time picker, the modal opens up showing hours and minutes (as expected), when I click on a new hour, this change is instantly submitted and the onChange function runs and my component re-renders with the new value and the modal closes. The sane happens when I click to change from AM to PM, the onChange function runs re-rendering my component and closing the modal as a result. This actually happens for any time change.

Expected Behavior 🤔

What I expected to happen is something similar to the v3.2.10 release where the onChange function is only triggered when the user submits their value by clicking the "ok" button, and is able to discard the pending changes they made by clicking the "cancel" button, meaning the onChange function would only run when the user has submitted their final time choice.

Steps to Reproduce 🕹

Steps:

Context 🔦

Your Environment 🌎

Tech	Version
@material-ui/core	v4.11.0
@material-ui/pickers	v4.0.0-alpha.12
React	16.13.1
Browser	Chrome
TypeScript
etc.

[oliviertassinari]

@jbyomuhangi Thanks for raising, agree. We have mui-org/material-ui#24151 and mui-org/material-ui#24150 that touch on this very problem. It's almost a duplicate.

[oliviertassinari]

We got the same issue reported in mui/material-ui-pickers#2101.

[eps1lon]

Encountered this issue while working on mui/material-ui#24315. Can't say yet if mui/material-ui#24315 and this issue are two symptoms of the same problem but fixing this issue helps with mui/material-ui#24315 so I'm looking into it now.

Nevermind. This issue is about using onChange semantics from the DOM. The title is too ambiguous. We probably don't want to revert React's intervention here. This would just add to the confusion. Instead, we can implement onChangeComitted like we have in the Slider.

[ximex]

is there any plan to impl an onChangeComitted?

[oliviertassinari]

@ximex Note that the actual solution to this problem might use a different API.