Dragging outside of container triggers text selection in Safari

Open
#605 0 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript
Domain
frontend

Research direction

Start by reviewing commit 9998c562dee9aa9ab8aa2e5816ea0530ffadd105 and reproduce the issue in Safari 14.1.2 with react-draggable 4.2.0 or 4.4.4. The work is done when dragging an element against its container boundary no longer selects text outside the element.

Written by the indexing model from the issue text.

Description

If you are dragging an element in Safari, the cursor turns into the text selection cursor. If the elements reaches its constraints aka. its containers border and the mouse drags and moves further, outside elements get selected.

It seems that the styles added to prevent the selection are not working in Safari => https://github.com/react-grid-layout/react-draggable/commit/9998c562dee9aa9ab8aa2e5816ea0530ffadd105

Adding user-select: none; to the body while the dragging happens prevents the selection from happening. Maybe this might be a solution for that problem? I could not find out why exactly the current implementation does not work in Safari, but I will report back once I found the issue.

Tested with:

  • Safari 14.1.2 on macOS 11.5 (Big Sur)
  • react-draggable 4.2.0 & 4.4.4 (currently latest version)
Dominant language
JavaScript
Stars
9.3k
Forks
1k
Avg merge
3d 8h
Merged PRs (30d)
4

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from react-grid-layout/react-draggable

All issues in react-grid-layout/react-draggable

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.