Buggy Behavior of Time Picker - MouseMove Firing Bug in Windows (TouchPan.js)

[cyfung1031]

https://quasar.dev/vue-components/time

Testing environment: Windows PC with Edge / Chrome (Blink Engine)

To reproduce:

1. Pointerdown at the clock number
2. Hold the pointer without releasing and waiting for the "Drag" cursor
3. Release

Expected Behavior:
Same as a click action to change to next value (hour -> minute -> second)

Buggy Behavior:
No switching among hour, minute and second.

If the user does not perform a fast clicking (a little time holding the click), it is 50% to have such experience.

[metalsadman]

can't reproduce Microsoft Edge Version 93.0.961.52 (Official build) (64-bit).

[cyfung1031]

can't reproduce Microsoft Edge Version 93.0.961.52 (Official build) (64-bit).

@metalsadman

Coding Issue in TouchPan.js

I found the coding problem is in TouchPan.js

it use clientX and clientY for the movement detection of touchpan.

In Windows 7 64bit OS Blink Engine, the movement can still trigger even there is no movement.

Therefore move( evt ) will be triggered by the native MouseEvent.
Since absX !== absY is always false, either ctx.move and ctx.end will not proceed.

This is confirmed as this issue disappears after adding the following coding:

onMounted(() => {

    document.body.addEventListener('mousedown', function(evt) {
        let p = evt.target.closest('.q-time__clock.cursor-pointer.non-selectable');
        if (p) {

            requestAnimationFrame(() => {

                document.documentElement.dispatchEvent(new MouseEvent('mousemove', {
                    clientX: evt.clientX + 1,
                    clientY: evt.clientY + 1
                }))
            })

        }

    }, true)


})

Suggested Solution

It might add some coding to skip the move if the clientX and clientY is the same as mousedown event.

CodePen Demo:

https://codepen.io/cyfung1031/pen/RwgQzNE
https://codepen.io/cyfung1031/full/RwgQzNE

Relevant Blink Bug Reports:
https://bugs.chromium.org/p/chromium/issues/detail?id=161464
https://bugs.chromium.org/p/chromium/issues/detail?id=721341

[pdanpdan]

The main problem is we cannot find a browser that can reproduce it.

[pdanpdan]

Because I don't have a browser to reproduce it I need someone to test at https://pdanpdan.github.io/quasar-docs/vue-components/time#basic and report if it's fixed.

[cyfung1031]

Because I don't have a browser to reproduce it I need someone to test at https://pdanpdan.github.io/quasar-docs/vue-components/time#basic and report if it's fixed.

Yes. It works for both Edge and Chrome. The pseudo mousemove event immediately after mousedown is eliminated.

According to the bug reports in chromium.org, this bug would only occur in Windows OS but not in every Windows machine.
They just close the file because reproduction is limited to some machines....

As for record, my computer environment is

• Windows 7 SP1 x64 Ultimate 6.1.7601 SP1
• Microsoft Edge 93.0.961.52 (Official Build) x64
• Google Chrome 93.0.4577.82 (Official Build) x64

[rstoenescu]

@cyfung1031 Thanks for your great contribution (reporting and also PRing)!
And thanks to all participants!

Pushed PR and one more commit to polish some things.
Fix will be available in Quasar v2.1.4