johnwalley / allotment

A React component for resizable split views
https://allotment.mulberryhousesoftware.com/
MIT License
988 stars 55 forks source link

[Firefox] Releasing mouse over a button after dragging sash causes button click #804

Open laurenga opened 5 months ago

laurenga commented 5 months ago

Found in Firefox (v126): Using the demo at https://allotment.mulberryhousesoftware.com/

Drag the divider between allotment.tsx and allotment.module.css to the left and keep the left mouse button depressed until it's over the a file listing (such as allotment.tsx) then release the mouse.

This results in a new pane being opened for allotment.tsx

This behavior does not happen in Chrome.

laurenga commented 5 months ago

I've found I can use the onDragStart and onDragEnd events to keep track of when the drag occurs. However, then I need to update all the buttons to be aware of the drag.

It would be a lot better if I could access the drag event so that default actions or event bubbling could be prevented.

johnwalley commented 5 months ago

@laurenga Thanks for reporting this. I can reproduce it so that's a good start!

I can't commit to a timescale for fixing this. There's a chance it's really simple, but there's also a good chance it's a tricky browser behaviour thing, e.g. https://github.com/w3c/pointerevents/issues/75.

I'll also consider adding an onDrag callback to accompany the onDragStart and onDragEnd callbacks

laurenga commented 5 months ago

Thank you for taking a look. I'm hopeful it's something simple. I wonder if event.preventDefault() on the drag event is enough to help with it.

johnwalley commented 5 months ago

I did try spamming all of preventDefault(), stopPropogration(), and stopImmediatePropogration() in a few places just to see if there was any effect. I'll see what I can do when I get a chance to take a more thoughtful look.