Interact.js: chrome 55 now supports pointer events, and this causes a bug

[cusial]

Chrome 55 now supports pointer events by default.

there is an issue where a pointer event will fire, but interact does not classify it as a mouse event, and does not record the pointer, and then when the event fires in the ui there is no pointer to retrieve the xy data points from. this particularly happens when you switch from console window to the browser window. the first pointer event bamboozles interact.

2016-12-06 12:42:05.508 interact.js:649 Uncaught TypeError: Cannot read property 'pageX' of undefined
at getXY (interact.js:649)
at getPageXY (interact.js:666)
at setEventXY (interact.js:610)
at Interaction.setEventXY (interact.js:1319)
at Interaction.pointerMove (interact.js:1782)
at HTMLDocument. (interact.js:3348)

I suspect the problem is with this test:
(line 3250 version 1.2.7)
// if it's a mouse interaction
if (mouseEvent || !(supportsTouch || supportsPointerEvent)) {

It does not classify as a mouse event as it does not have "mouse" in the eventType, it does not support touch, but it does support pointer events, and this is a pointer event
we theorize that this test should be:
if (mouseEvent || !supportsTouch || supportsPointerEvent) {

As a result of this test the pointer is not saved when the recordPointer is called.

It seems the new version in development is quite different from what has gone through the past, so i am a bit hesitant to try and fix it.

[think2011]

+1

[tkahn]

I'm also having problems with Interactjs on Chrome 55.

[davidlukerice]

Updating to the interact.js 1.3.0 bump fixed chrome 55 issues, but causes some issues in chrome 54 and other browsers. Though chrome55 does have some drag/drop issues if the mouse is outside the browser window when interact loads.

[wbercx]

+1

[taye]

@cusial, @tkahn Please try using the dist/interact.js file in the unstable branch. (`"interact": "taye/interact.js#unstable" in your package.json if you're using npm).

@davidlukerice What errors do you see in which browsers with v1.3.0? I've fixed #460 with Safari.

@think2011

+1

Please don't do this.

@Driezzz

+1

Please don't do this.

@wbercx

+1

Please don't do this.

[davidlukerice]

@taye A lot of the issues came down to how our code interacted with the 1.3.0 changes and have mostly been resolved.

Other than safari dragging, Chrome 55 has an issue with detecting dragging behavior if the mouse cursor is outside the window when the page loads. The following change in interaction.js seemed to fix it for us, though may not be the best solution.
https://github.com/ynishiza/interact.js/commit/de479f4e2f5209aba5941d535296bbfb0dd7af79

[taye]

@davidlukerice thanks for the tip. I've pushed a slightly different fix and made a new unstable build. Let me know if anything else comes up.

[davidlukerice]

@taye Awesome! Seems to resolve our issue. Thanks for the quick fixes today.

[Driezzz]

Hi, I'm still having some issues with dragging. I updated my dist folder with the new files from branch/unstable manually. bower install interactjs for version 1.3.0 didn't work with this message.

No tag found that was able to satisfy 1.3.0

When i drag with touch the drag stop after one second. The draggable object just moves for a couple of pixels. This is in chrome 55 on windows.

Am I doing something wrong?

[bwobbones]

@Driezzz I had to use this in my bower.json:
"interact": "taye/interact.js#unstable"
Guess that'll work until they bump the version number...

[Driezzz]

@bwobbones that seemed to solve the install problem. But the problem itself seems to persist.

When i drag with touch the drag stop after one second. The draggable object just moves for a couple of pixels. This is in chrome 55 on windows. When I try it in an older version of chromium, the dragging works but then clicking on an element inside the draggable element does nothing anymore. Keeps setting the on cursor: move.

[smelyakov]

@Driezzz +1
By the way @Driezzz, does the dragging work if shift key is pressed?

[Driezzz]

@smelyakov dragging itself works with using the mouse, including with the shift key. BUT, the problem I have is with touch events, not on mobile, but with a touch screen where we can't use a mouse.

[smelyakov]

@Driezzz the same for me actually. First it broke on chrome for android beta, and then on stable 55. The behaviour can be reproduced on desktop chrome 55 with Device toolbar toggled on. Drag doesn't work unless shift button is pressed (dragMove listener fires just once)

[skrenek]

I am also encountering this issue, even with 1.3.0. When I start dragging an item, I immediately get dragstart and 1 dragmove events, as expected, but then immediately get a dragend (triggered by a pointercancel event) event even though my finger is still on the screen. I've only encountered this on Windows versions of Chrome 55. My mac version 55 works just fine.

Edit:
Incidentally, if I abandon the if statement on line 444 of Interact.js and just use the mouse and touch events (the else condition), the library works fine for me again on Chrome 55. As I see it there is an issue with one of: a Chrome bug in Windows version 55 for pointer events, a bug in how Interact.js is handling pointer events, or an issue with how I upgraded from 1.2.4 to 1.3.0 that I am as yet unaware of.

[taye]

I've pushed a thing to the stable branch to avoid PointerEvents in Chrome. If you're using v1.2.*, updating to v1.2.8 should solve this issue.

[Driezzz]

This seems to resolve the issue, thank you!

[sixinli]

@taye sorry a bit confused, is 1.2.8 official released? The one I see on README.md and http://interactjs.io/ is 1.2.6 :(

[Driezzz]

@taye This problem is back in 1.3.3 . When I start dragging an item, it moves with my finger for a couple of pixels and then stops. Though I don't get any more warnings of Passive Listeners in the console.

This is in Chrome 61, it does seem to work in the latest version of FireFox. But for our case, we only use Chrome (Chromium).

[taye]

@Driezzz are you using touch-action: none?

[Driezzz]

@taye That does seem to do the trick. Thanks!

[chrsalbert]

I've got another case: Of course, touch-action: none works. But I'm using the _hold_ option, in mind, that mobile (touch) users can scroll their browsers without having "dead" areas (interact.js objects). To move an object, they need to hold down for a few milliseconds.
But I can't find a solution where both work, scrolling browser and moving objects. Any suggestions?