Drag selection is dropped when mouse is outside the pane or when mouse encounters outside elements

[hiepnguyen3001]

Describe the Bug

When using drag select, selection is drag selection is immediately dropped when mouse is outside the pane or when mouse encounters outside elements, even when mouse button has not been released. This makes drag selection unusable if I want to place something in the middle of the pane.

Your Example Website or App

https://codesandbox.io/p/sandbox/suspicious-pond-cxypq3?file=%2FApp.js%3A76%2C34

Steps to Reproduce the Bug or Issue

1. Start drag selection
2. Drag mouse outside the pane or to "Floating bar" div (see codesandbox above)

Expected behavior

Drag selection persists even when mouse is outside the pane or when mouse encounters outside elements

Screenshots or Videos

https://github.com/xyflow/xyflow/assets/139328005/b853e09d-5407-4466-89fb-4b8dbfa84d6f

Platform

• OS: macOS
• Browser: Chrome
• Version: 123.0.2420.97

Additional context

No response

[V3RON]

This problem originates from Pane component:

<div
      className={cc(['react-flow__pane', { draggable: panOnDrag, dragging, selection: isSelecting }])}
      onClick={hasActiveSelection ? undefined : wrapHandler(onClick, container)}
      onContextMenu={wrapHandler(onContextMenu, container)}
      onWheel={wrapHandler(onWheel, container)}
      onMouseEnter={hasActiveSelection ? undefined : onPaneMouseEnter}
      onMouseDown={hasActiveSelection ? onMouseDown : undefined}
      onMouseMove={hasActiveSelection ? onMouseMove : onPaneMouseMove}
      onMouseUp={hasActiveSelection ? onMouseUp : undefined}
      onMouseLeave={hasActiveSelection ? onMouseLeave : onPaneMouseLeave}
      ref={container}
      style={containerStyle}
    >
      {children}
      <UserSelection />
    </div>

Once the mouse exits the pane, the onMouseLeave event triggers, ending the selection process. Is there any rationale for not subscribing to the global 'onMouseMove' and 'onMouseUp' events? Additionally, we could consider temporarily disabling text selection globally during the selection process. What do you think?

[hiepnguyen3001]

I can't think of a reason for not subscribing to the global 'onMouseMove' and 'onMouseUp' events. And yes, I would prefer that text selection is disabled globally during selection.