Force press clicking messes with Dragging on Safari about react-beautiful-dnd HOT 24 CLOSED

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

from react-beautiful-dnd.

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

from react-beautiful-dnd.

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

from react-beautiful-dnd.

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.

from react-beautiful-dnd.

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.

from react-beautiful-dnd.

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.

from react-beautiful-dnd.

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

from react-beautiful-dnd.

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

from react-beautiful-dnd.

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

from react-beautiful-dnd.

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.

from react-beautiful-dnd.

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

from react-beautiful-dnd.

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

from react-beautiful-dnd.

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

from react-beautiful-dnd.

:) 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.

from react-beautiful-dnd.

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

from react-beautiful-dnd.

@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.

from react-beautiful-dnd.

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.

from react-beautiful-dnd.

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

from react-beautiful-dnd.

^ 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!)

from react-beautiful-dnd.

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

That should reduce the scope a bit.

from react-beautiful-dnd.

I updated the description in light of our findings

from react-beautiful-dnd.

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

from react-beautiful-dnd.

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.

from react-beautiful-dnd.

You're welcome @v0lkan

from react-beautiful-dnd.