React-beautiful-dnd: Force press clicking messes with Dragging on Safari

[v0lkan]

Bug or feature request?

Bug

Expected behaviour

When releasing her finger from the trackpad, the card should remain to the list; it should not remain sticked to the cursor

Actual behaviour

See video https://www.youtube.com/watch?v=-gWQ9hkjUj8

The radar effect happens when the user releases the card.
Even though the user releases the card, she can still move things around.

This bug manifests itself on all the example pages.

Steps to reproduce

See https://www.youtube.com/watch?v=-gWQ9hkjUj8

You probably need a magic trackpad instead of a mouse.
Isssue manifests itself in the recent Mac OS, at the very least.

I suspect, but I haven’t time to dig in, that it might be related to “force touch”.

Demo

Here is a video with pointer events recorded, to help you:

https://www.youtube.com/watch?v=-gWQ9hkjUj8

[alexreardon]

Thanks for the video @v0lkan! This does not look good. I will try get get access to a magic touch pad to see if I can reproduce this.

[v0lkan]

Happy to help @alexreardon

In case you cannot repro, I can come to Atlassian Mtn. View office, and show it myself :)

Atlassian is literally 5 minutes driving distance from me :D

Cheers,

V.

[alexreardon]

I am in the Sydney office - and all good. I found one :)

[v0lkan]

:) — Sydney is a bit far away, I guess.

[alexreardon]

@v0lkan can you please post a screenshot of your trackpad settings?

[alexreardon]

I have been playing with a variety of settings and I cannot seem to reproduce this behaviour

[v0lkan]

I have been playing with a variety of settings and I cannot seem to reproduce this behaviour

I am using a magic trackpad (the new one) on Mac OS Sierra.

My trackpad settings are extremely sensitive (not everyone uses it like that) — see attached image.

So my guesstimate is, I might be clicking something between a force touch and a regular touch.

[v0lkan]

@alexreardon here is a different variation » https://youtu.be/4MGnLO9lxyc

[v0lkan]

Using Safari, btw; not sure it’s the same for Chrome.

[alexreardon]

I have tried in safari with all of your settings and I am still unable to reproduce. Hmm..

[v0lkan]

:) Unless I’m on an alternate universe, I can reproduce it %100 of the time.

I will try with a brand new Mac OS probably/hopefully within a few days.

[alexreardon]

When you hover over a link a quick link pops up - how do you activate that?

[v0lkan]

@alexreardon it is called “force touch” or something like that; you press deeper. — Only on new trackpads and new macs.

ref: https://support.apple.com/en-us/HT204352

See the “force click and haptic feedback” option on the settings I shared above.

[v0lkan]

There is also an “in between” state. Hard to describe but, like a “half click”.

If you check this video https://www.youtube.com/watch?v=4mQ8g9Y9Q_U you can see that the size of the popover changes. — The deeper I press, the bigger the popover is. — If I press deep enough, then a permanent popover is displayed.

Certain apps (on ipad and iPhone — not sure if on Macs too) also utilize this in-between state for other interactions.

I’m not sure what kind of quirky sequence of mouse events (or touch events) these force gestures trigger; but I suspect that it is what makes things out of order.

That said, I haven’t checked the source or debugged it to clarify things further.

Hope that helps.

[alexreardon]

ah okay - i do not have the latest trackpad or mac - so that would be why i cannot reproduce it. I will try to track down a later model

[v0lkan]

^ will try to verify w/o haptic settings to see if it reproduces.

If our hypothesis is true, then it should not repro w/o haptic feedback enabled.

(thinking about how this discussion would look like five years into the future; UX changes a lot!)

[v0lkan]

confirmed! with force touch disabled, everything works like butter on a pancake!

That should reduce the scope a bit.

[alexreardon]

Getting closer! I will try to wrangle a appropriate piece of hardware so i can move forward

[alexreardon]

I updated the description in light of our findings

[alexreardon]

I have put in a request to get the appropriate hardware. I'll keep you updated

[alexreardon]

I have a fix. It almost broke me. So sad that safari decided to do its own thing
https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/SafariJSProgTopics/RespondingtoForceTouchEventsfromJavaScript.html

I will write some tests and push it up

[alexreardon]

Unfortunately this will not be fixed if you are using react-beautiful-dnd inside of a iframe (such as our storybook examples). This is because of a bug in Safari where the mouse force touch events are not published inside of an iframe.

Given that this is a browser issue there is no work around for it at this time. So if you are creating draggable anchors inside of an iframe and the user is using safari and has a force touch device - things will not be good for them. My hands are tied until the bug is fixed within Safari.

There may be a work around if you really need to be within an iframe - you might be able to use a {capture: true} on the webkitmouseforcechanged event on the parent iframe to reimplement our fix. You could try calling event.preventDefault() to stop the link preview behaviour. Keep in mind that doing this will prevent the link preview behaviour from working on your draggable anchors. Let me know if this does not work for you.

[v0lkan]

webkitmouseforcechanged => Agree that it’s kind of annoying to do vendor-specific code forks just because a specific vendor went out of whack.

It reminds me of the days we maintained two separate code bases for IE5 and NN4. — I would hate to see those days back :)

That said, the patch is nicely-abstracted; anyone who does not support the force touch change event won’t be impacted at all. — 👏 for that.

[alexreardon]

You're welcome @v0lkan