Clicking both mouse buttons quickly on an arrow button causes the time picker to spin wildly

arqex / react-datetime

A lightweight but complete datetime picker react component.

2k stars 868 forks source link

Clicking both mouse buttons quickly on an arrow button causes the time picker to spin wildly #602

Open kaiyoma opened 5 years ago

kaiyoma commented 5 years ago

I'm Submitting a ...

[x] Bug report
[ ] Feature request
[ ] Support request

Steps to Reproduce

Open the time picker
Click one of the arrow buttons quickly with both mouse buttons

Expected Results

The time numbers should change normally.

Actual Results

The numbers start to spin wildly and can't be stopped.

Minimal Reproduction of the Problem

I can easily repro this issue in our codebase but also in the codepen linked from the project page. Here's a video: https://www.youtube.com/watch?v=owX54-e-k5k

arqex commented 5 years ago

Woow, nice catch! looks like the mouse events get jiggled up and the mouseup is not detected.

We at least should deactivate the auto incrementing/decrementing when the calendar is closed, at least that way the user can stop it.

Not listening to right clicks would help to not to mess the events, but this kind of issues are always tricky. A classic way of reproducing it is by clicking down the arrow, drag the mouse out of the window and release the click. That way the mouse up is not detected and it will continue increasing the value.

Oleg2tor commented 5 years ago

Fixed in #590

arqex commented 5 years ago

Thanks @kaiyoma and @Oleg2tor, this will be fixed in v3 as right click should update the time parts. The other issue with infinite increase when mouseDown ,moving the cursor out of the calendar and mouseUp I think there is nothing we can do.