Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to Select Text Within Draggable Elements #2680

Open
Vituli opened this issue Feb 24, 2025 · 0 comments
Open

Unable to Select Text Within Draggable Elements #2680

Vituli opened this issue Feb 24, 2025 · 0 comments

Comments

@Vituli
Copy link

Vituli commented Feb 24, 2025

Expected behavior

Text inside draggable elements should be selectable for copy without interfering with drag functionality.

Actual behavior

Text within draggable elements is not selectable because the library captures mouse events for dragging, preventing text selection.

Steps to reproduce

  1. Create a draggable element using Draggable from react-beautiful-dnd.
  2. Add a text element inside the draggable element.
  3. Attempt to select the text using the mouse.
  4. Notice that the text cannot be selected because the drag event is triggered.

Suggested solution?

Add a prop like allowTextSelection or provide a built-in way to allow text selection within draggable elements without needing to manually stop propagation.

Current workaround:

<Draggable draggableId="item-1" index={0}>
  {(provided) => (
    <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
      <span onMouseDown={(e) => e.stopPropagation()}>Selectable Text</span>
    </div>
  )}
</Draggable>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant