The default behaviour of the ClockPicker when using the TimePicker component from Material-ui is:
- ClockPicker display the hours view.
- User clicks on an hour number.
- On mouseup the ClockPicker captures that value and send it through its onChange prop and then the view of ClockPicker is changed to the minute view.
- User clicks on a minute.
- On mouseup the ClockPicker captures that value and send it through its onChange prop and then the ClockPicker component is hidden
Because I need to have more control on when the ClockPicker is displayed I can't use the TimePicker component but the ClockPicker itself and when you use the ClockPicker directly it doesn't auto close when the users selects a minute so basically I would like to re-implement that behavior.
Initially I include this code in the onChange prop of the ClockPicker component:
<ClockPicker
onChange = { (newDate) => {
if (date.getMinutes() !== newDate?.getMinutes()) {
setDisplay(false)
}
}}
/>
date here is the current Date object and newDate is the new date object being sent by the onChange prop through the callback.
So basically this checks when a user changes the minute value and it hides the component accordingly.
The problem is the onChange callback is fired immediately when the user mousedown on a minute number and I don't want that, I want it to fire when user mouseup only, how can I achieve this behavior? unfortunately ClockPicker doesn't accept the onMouseUp prop.