Modal closes when selecting text and releasing mouse outside modal

[v2nic]

Problem Description

When selecting text in a modal input field and releasing the mouse button outside the modal bounds, the modal inappropriately closes. This is a common UX issue that occurs when users are trying to select text quickly.

Steps to Reproduce

1. Open any modal with a text input field
2. Click and drag to select text in the input
3. Continue dragging the mouse cursor outside the modal bounds
4. Release the mouse button
5. The modal closes unexpectedly

Expected Behavior

The modal should remain open when text selection operations end outside the modal bounds. Only intentional clicks on the backdrop should close the modal.

Actual Behavior

The modal closes when the mouse up event occurs outside the modal, even during text selection operations.

Current Attempted Solutions

We've tried several approaches based on research from similar issues in other modal libraries:

1. Simple timeout-based prevention - Set a flag to prevent closing for X ms after mousedown
2. Text selection tracking - Monitor selectionchange events
3. Mouse movement detection - Track drag operations
4. Element comparison - Compare mousedown and mouseup targets (current implementation)

None of these approaches have fully resolved the issue.

Research References

This is a well-known issue that affects many modal implementations:

• React Bootstrap Issue #2455
• Headless UI Issue #1646
• Stack Overflow Solution

The issue became more prevalent after Chrome updates that changed how click events are handled.

Current Implementation

// Current approach compares mousedown/mouseup targets
const handleMouseDown = (event: MouseEvent) => {
  const target = event.target as HTMLElement
  const modalContent = backdropRef.current?.nextElementSibling
  
  if (modalContent && modalContent.contains(target)) {
    const handleMouseUp = (mouseupEvent: MouseEvent) => {
      const mouseupTarget = mouseupEvent.target as HTMLElement
      
      if (target !== mouseupTarget) {
        setIgnoreClick(true)
        setTimeout(() => setIgnoreClick(false), 100)
      }
      
      document.removeEventListener('mouseup', handleMouseUp, true)
    }
    
    document.addEventListener('mouseup', handleMouseUp, true)
  }
}

Environment

• Browser: Chrome (latest)
• React: Next.js application
• Modal implementation: Custom component with backdrop click handling

Request

Looking for a robust solution that:

1. Prevents modal closure during text selection operations
2. Maintains normal backdrop click functionality
3. Works consistently across different browsers
4. Doesn't rely on arbitrary timeouts

Authored by v2nic on Feb 11, 2026