bug(cdk/drag-drop): DRAG AND DROP SELECTING TEXT WITH SHADOW DOM ENCAPSULATION ON FIREFOX

[XavierDupessey]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Hello,

There is a problem with Drag and Drop examples from https://material.angular.io/cdk/drag-drop/overview when a parent component is encapsulated with Shadow DOM on Firefox: it selects text of other elements (cf video).

dnd.mp4

I tested it with the "Drag&Drop connected sorting" example from version 14 to 17.
The bug exists in all versions (I did not try older versions).

Thank you,
Xavier

Reproduction

StackBlitz link (under v14): https://stackblitz.com/edit/gszzna?file=src%2Fapp%2Fcdk-drag-drop-connected-sorting-example.ts
Steps to reproduce:

1. Drag and drop the last item from the Left list to the Right list

Expected Behavior

Drag and dropping an item should not select text.

Actual Behavior

Drag and dropping an item selects text.

Environment

• Angular: at least all versions from 14 to 17
• CDK/Material: at least all versions from 14 to 17
• Browser(s): Firefox 124.0.1 (64 bits) (latest version)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

[crisbeto]

I can reproduce it as well. It looks like we're doing the right thing by applying user-select: none, but Firefox doesn't propagate it inside the shadow root. Will keep it open, but I'm not sure we can do much about it.

[crisbeto]

For what it's worth, you can fix it for your app by adding this to your styles:

.cdk-drop-list-dragging,
.cdk-drop-list-receiving {
  user-select: none;
}

[XavierDupessey]

Hello,

Maybe this workaround would work for the Drag and Drop examples from Angular Material's documentation but it is still buggy in my real app, unfortunately. Other elements from the UI are still selected.

In Angular CDK's code, I see that a workaround would be done "by setting user-select: none on the body, however it has causes a style recalculation which can be expensive on pages with a lot of elements" cf

components/src/cdk/drag-drop/drag-drop-registry.ts

Lines 158 to 161 in 452cde2

	// Preventing the default action on `mousemove` isn't enough to disable text selection
	// on Safari so we need to prevent the selection event as well. Alternatively this can
	// be done by setting `user-select: none` on the `body`, however it has causes a style
	// recalculation which can be expensive on pages with a lot of elements.

🤷

[XavierDupessey]

This workaround works, I hope it is not too bad for performances:

body:has(> .cdk-drag-dragging) {
  user-select: none;
}