Mystery "Draggable" text element in DOM

[n8sabes]

On iOS, I am seeing an invisible text field become selected in the top-left of the page on a long-press. I have searched my code but nothing is standing out.

QUESTION: Does dnd-kit inject a "Draggable" text element into the DOM when dragging starts? If so, is there a way to obscure or prevent this element from being auto-selected?

[clauderic]

Could be the LiveRegion component which renders accessibility announcements 🤔 https://github.com/clauderic/dnd-kit/blob/master/packages/accessibility/src/components/LiveRegion/LiveRegion.tsx

I think it needs userSelect: 'none' style, feel free to open a PR, otherwise I should get to this in the next few weeks.

[n8sabes]

Hi @clauderic,

I tried adding userSelect: 'none', including !important everywhere I could think of (from handlers to DOM elements), but still get the 'Draggable' text injected and selection of the text.

Thank you for including a fix for this.

[clauderic]

You may need to try WebkitUserSelect: 'none'

[n8sabes]

Good thought. I just tried explicit inclusion of the webkit vendor prefix, but unfortunately get the same result.

[MKraust]

Same problem using these packages. I have tried to add user-select: none, -webkit-user-select: none everywhere, but unfortunately with no results :(

"@dnd-kit/core": "^6.1.0",
"@dnd-kit/sortable": "^8.0.0",
"@dnd-kit/utilities": "^3.2.2",

UPD: solved with these styles on <DragLayer className={cn.dragLayer} />:

.dragLayer, .dragLayer * {
  user-select: none;
  -webkit-user-select: none:
}