IMPORTANT: draggable DOM attribute blocks text selection

Describe the bug If you pass down the drag property to the ref attribute of your DOM element, then a draggable native html attribute will be set to true. It doesn’t matter if canDrag is set to false. The draggable HTML attribute is always true and because of this, the user cannot select a text in this component.

Reproduction https://codesandbox.io/s/quirky-chaplygin-89xqe

Steps to reproduce the behavior: Just try to select the text “My Draggable component”. You will see that this doesn’t work. Afterwards you can take a look into the MyDraggableComponent.tsx. As you can see, the canDrag option is set to false.

Expected behavior If canDrag is set to false, I expected that the HTML attribute draggable is set to false.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36
• Version react-dnd: latest

[maclockard]

Related https://github.com/react-dnd/react-dnd/issues/2565 I also tested that this prevents text selection in both chrome and safari as well.

~Another workaround that’s slightly more declarative is to set draggable={false} on a container element lower down then the drag element.~

EDIT: my workaround does not work. ended up just conditionally attaching drag ref depending on if it wanted something to be draggable.

[ffjanhoeck]

Edit 2: If anyone have the same problem: I have found a workaround for this. It does fix the issue, but isn’t a recommended way.

useLayoutEffect(() => {
    if (rootRef.current) {
        if (disabled) {
            rootRef.current.setAttribute('draggable', 'false');
        } else {
            rootRef.current.setAttribute('draggable', 'true');
        }
    }
}, [disabled, rootRef.current]);