Loading
Suppress text selection while dragging prioritized labels
What does this MR do and why?
Stops a drag of a prioritized label from selecting the text of underlying elements it passes over (and gives the drag a proper grabbing cursor).
Root cause: app/assets/javascripts/labels/label_manager.js creates its Sortable directly and never adopted the shared drag handlers from ~/sortable/utils. Every other Sortable consumer (boards, work item children, linked items) toggles is-dragging on <body> via sortableStart/sortableEnd, which activates the framework rules in app/assets/stylesheets/framework/sortable.scss (.is-dragging * { user-select: none; cursor: grabbing !important; }). Without the body class those rules only apply inside the drag clone, so the browser happily selects page text under the cursor during the drag.
The fix wires the two shared handlers into the existing Sortable.create options and replaces the string 'is-dragging' with the DRAG_CLASS constant it duplicated. No new CSS, no behavior change to sorting itself: the framework rules and their consumers stay as they are.
Test note: none of the three existing sortableStart/sortableEnd consumers unit-test this wiring, and the observable behavior (native browser text selection mid-drag) is not assertable from jest. spec/features/projects/labels/update_prioritization_spec.rb exercises the drag path end to end and passes with the change; its "as a guest cannot sort prioritized labels" example fails in-suite on unmodified master too (passes in isolation), a pre-existing order flake unrelated to this diff.
References
- Dragging prioritized labels can cause unintended interaction with underlying elements (#525885)
- Clone positioning and styling, split out for a scoped review: Sortable drag clones render offset from the cursor inside the panel layout (#607347), implemented in Position the label drag clone under the cursor (!247594)
Screenshots or screen recordings
| Before | After |
|---|---|
 |
 |
Both sides are the same simulated mid-drag moment, mouse button still held: the quick win prioritized label dragged from its description text down into the Other labels panel (the floating row clone sits over the backend row in both shots). Before, the native selection swept the text the pointer crossed; window.getSelection().toString() returned that 129-character text. After, the same probe returned an empty string, with is-dragging on body. The grabbing-cursor half of the fix does not show here because screenshots never capture the OS cursor.
How to set up and validate locally
- In a project with several labels (Manage > Labels), star a few to populate Prioritized labels.
- Drag a prioritized label slowly across the other rows and the page text below.
- Before: text under the cursor gets selected (blue highlight) while dragging. After: nothing selects and the cursor shows the grabbing state.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Edited by Paul W