Draggable onClick issues on Chrome 55 (touch)

[vamtam 0 Likes (Newbie)]

Hi,

 

I originally posted this as a reply to another topic, but it has since been marked as "Answered" and it got buried. So, I figure it's best to post a new topic for this issue.

 

Essentially, event.preventDefault() in Draggable's onClick callback no longer works in Chrome 55.

 

The problem only appears on Chrome 55 with touch events (regular mouse clicks are fine). I've created a minimal demo + instructions for reproducing the problem here:

 

Our current workaround is to add a 100ms delay between the click and the opening of the submenu, but we'd be grateful if you could offer a permanent solution.

See the Pen qRBwEV by nyordanov (@nyordanov) on CodePen

[OSUblake 9,990 Likes (Superhero)]

Yes, I just noticed that some of my code has broken as a result of the new PointerEvents being added to Chrome 55.

https://greensock.com/forums/topic/15560-draggable-detect-the-first-and-last-element/?p=68605

 

I sent a message to let them know.

[GreenSock 8,117 Likes (Superhero)]

I believe this is resolved in the upcoming release which you can preview [uncompressed] at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

 

Better?

[vamtam 0 Likes (Newbie)]

I'm afraid that this is still broken:

See the Pen RKPMvZ by nyordanov (@nyordanov) on CodePen

The problem only appears if you tap on "Open submenu". Regular mouse clicks are fine. Emulated touch events are also broken, so you can use that for testing.

[OSUblake 9,990 Likes (Superhero)]

Ugghh... I feel for you Jack. Sorting out all this out looks painful. 

 

You may find these links useful. It's the best resource I know of for touch/pointer events... although it hasn't been updated since October.

https://github.com/patrickhlauke/touch

https://patrickhlauke.github.io/touch/

https://patrickhlauke.github.io/touch/tests/results/

https://patrickhlauke.github.io/getting-touchy-presentation/

[GreenSock 8,117 Likes (Superhero)]

I believe it's resolved now. Please take a peek. 

[vamtam 0 Likes (Newbie)]

Hi Jack,

 

I'm sorry to keep bugging you with this, but we found a few more edge cases:

 

1. The fix doesn't seem to work if allowNativeTouchScrolling is true - we still get both the MouseEvent and the PointerEvent. This is not huge a problem for us, I just wanted to let you know about this issue.

 

2. There is still something wrong with the events, although I'm still trying to figure out a test case. However, you can see here -

See the Pen PWGZeW by nyordanov (@nyordanov) on CodePen

- that the inner link becomes focused when you tap on "Open submenu".

[GreenSock 8,117 Likes (Superhero)]

At this point, I have no earthly idea how to deliver all of those behaviors. Some seem fundamentally incompatible. For example, in order to permit touch-scrolling in the one direction, we cannot call preventDefault() on the touchdown/pointerdown event but to prevent the link activation, it seems to necessitate calling preventDefault(). We either call it or don't

 

We've already done quite a bit of fancy-footwork under the hood to get around a bunch of browser bugs/inconsistencies and normalize behavior, but in this case I can't see a solution. Of course you could just solve the problem by manually altering the blur/focus state that's causing problems for you. Or disable native touch scrolling. 

 

Sorry I don't have a great/easy solution that can be baked into Draggable here. If you (or anyone) have any suggestions, I'm all ears.