Preventing right click activating drag.

[timothyallan]

Hey Martin,

Right clicking activates onDragStart, and the corresponding DragEventHandler doesn't seem like we can cancel the actual click event on our end. Is this something we'd intercept and preventDefault() with a custom Sensor or something?

To replicate, on the examples page, right clicking on a draggable object, then clearing the context menu ends up locking the draggable to the cursor until you either left or right click again.

[martinpengellyphillips]

Hey. This sounds like a generally useful thing that we should add into the default sensor (ignore right clicks). Feel free to submit a PR. Alternatively I'll add this in future.

In the meantime, yes, you could create your own sensor implementation that ignores right clicks.

[martinpengellyphillips]

In latest version I don't believe the behaviour happens anymore (due to improvements in the sensor logic), though there is no special handling for right clicks. Closing, but feel free to re-open if I am mistaken.

[timothyallan]

Yep, still happens. Just revisited this great package to try and implement something that didn't work beforehand, now with .7+ it works... but the right click issue still persists.

To replicate, select "Basic drag & drop" from the main examples area on the website, right click on the "Draggable" object, dismiss the context menu, and you'll find the object is stuck to the cursor.

[martinpengellyphillips]

@timothyallan I can't reproduce that 🤔 What OS and browser are you using? How are you dismissing the context menu?

[timothyallan]

Wellllll, that is interesting. I'm on Mac, tried Chrome/FF/Safari and all in private browsing to make sure I wasn't getting cached data.

https://user-images.githubusercontent.com/1995135/199383981-20a47a92-54f8-49e6-b6a2-ee9464408eb4.mp4

[martinpengellyphillips]

Hmm. I'm testing on Windows so that's a difference.

I'm happy to implement a check for right mouse button in the activation logic, but I'd like to understand what is happening here more first:

Has the click completed for you when the context menu shows? Or are you still pressing the mouse button down at that point?

[timothyallan]

It’s very odd that it happens with the OS being the difference! I’m simply single right clicking and releasing, then left clicking somewhere other than the context menu. Nothing is being held down.

Does it in my solid app as well, which is what got me to try it on your site again just for kicks.

[martinpengellyphillips]

That is odd indeed - logically the drag should not become stuck because on pointerup the listeners are removed and all drags stopped. The only way that could occur is if something else is intercepting and cancelling the pointerup event - I wonder if the contextmenu behaviour on mac is doing that 🤔

Perhaps on mac the contextmenu is activated on pointerdown and then intercepts the pointerup? Can you try and right press and hold to see if the contextmenu still appears?

Also, if you are able to build the solid-dnd library locally you could try adding some debugging to https://github.com/thisbeyond/solid-dnd/blob/main/src/create-pointer-sensor.ts to see what's going on.

[timothyallan]

Console.log all the sensor functions :)

• Right click on a draggable object
• Browser context menu pops up
• DnD attach fires with a pointerEvent button:2
• onActivate fires state.active.sensor:null isActiveSensor():false
• moving mouse while context menu is up doesn't fire any events.
• Single left click anywhere in the browser to dismiss the context menu, object is now locked to cursor, and moving fires a bunch of onPointerMoves.
• Single left click again fires onPointerUp isActiveSensor():true with button:0
• detach fires

[martinpengellyphillips]

Thanks! That does look like the contextmenu is intercepting the onpointerup we rely on.

I've released 0.7.3 now that should fix it - please give it a go.

[timothyallan]

Like a boss. No more sticky div's :)

That's a new one for me too. I usually just return right away on right clicks in my app so I never ran into it!