Skip to content

useResizeHandle: Fix bugs with pointer capture, native drag, and text selection#610

Open
ryantrem wants to merge 5 commits intomicrosoft:mainfrom
ryantrem:resize-handle-fixes
Open

useResizeHandle: Fix bugs with pointer capture, native drag, and text selection#610
ryantrem wants to merge 5 commits intomicrosoft:mainfrom
ryantrem:resize-handle-fixes

Conversation

@ryantrem
Copy link
Member

This PR addresses #523.

Most of the problems stem from using legacy/compatibility events like mousedown and touchstart (rather than just poitnerdown). There are several problems being addressed:

  • When dragging beyond the limits of the size, the cursor is no longer over the drag element, and so the mouseup event is not received and we stay in resize mode.
  • When a non-draggable part is dragged, it can start a native drag event, which has a similar result with getting us into a state where we are stuck in resize mode.
  • Since legacy events are being used, as the mouse moves with the mouse button down, the browser selects text. This is definitely not desired behavior while resizing.

This PR fixes these problems by handling additional events for:

  • Capture pointer while dragging (this would only affect modern browsers that support pointer events).
  • Handle dragstart and simply ignore it.
  • Once a drag operation starts, handle selectstart and ignore it.

@dmytrokirpa dmytrokirpa added bug Something isn't working react-resize-handle labels Feb 26, 2026
@george-cz
Copy link
Contributor

Hello @ryantrem, thank you for finding and fixing these!

I was never able to reproduce the second issue you mention, but the fix doesn't seem to break anything for me either.

The other two seem to be fixed and I couldn't find any new issues after extensive testing, so lets merge this in.

Thanks again

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working react-resize-handle

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants