useSortable listeners - conflicts with other listeners of the children elements

[josias-r]

We have an issue in our codebase (specifically with TinyMCE), where a sortable list causes issues because of the onKeyDown listener conflicting with some internal listeners of TinyMCE.

We noticed the Space key is really buggy (presumably because of the keyboard navigation of dnd-kit).

Our workaround for the moment is to add an onKeyDown listener to the immediate child of a useSortable element with e.stopPropagation(). This resolves the issue.

Now the question is: Is our workaround actually a recommended pattern? If so, dnd-kit should provide at the minimum some documentation on this, or even provide some extra listeners via the API for the immediate children.

We see no issue with the workaround. since the onKeyDown event has no need to propagate, because the active target when using keyboard navigation is always to highest element, therefore propagating the event to the children seems redundant anyways.

(of course a drag event for example cannot have the same workaround, since there propagation is really necessary)

And maybe also worth looking into, is why the onKeyDown event causes issues in the first place. Why are children affected by it, shouldn't that event easily work in parallel to events attached to children?

[josias-r]

Noticed an additional issue with the mouse event listeners.

Same story, in a Modal which opens from one of the sortable items you cant select text anymore, because the drag events start interfering with the user trying to drag-select text.

Maybe the only issue here, is that dnd-kits event are propagating through the portal, because selecting text inside a sortable element is clear, that that would be buggy.

There is a general issue regarding Portals in the react repo about this:
facebook/react#11387

[josias-r]

We are finding more and more issues.
I realise now, that the issue is really that all the events are propagating through the react portal, which is really inconveniant to work with.

This means it's not really an issue coming from dnd-kit itself.

But at the very least this should be mentioned in the documentation for sure. I'm already not the first person running into this, and I wont be the last, it's a common and acceptable pattern to have components such as Modals nested in an Item of a sortable list.

An even better solution, would be if dnd-kit would provide a fix already. A hook or a component to wrap react portal components, which will stop event propagation. Basically a way to opt out of the dnd-kit listeners at any nested lvl.

Until then, we will be searching a workaround ourselves.

Keeping this issue open, so this can at least be mentioned in the docs

[richardkyk]

I had a similar issue where I had an input field inside a draggable and typing <space> would cause issues.
#477 (comment) was able to resolve my particular problem.

[josias-r]

Closing this as won't be added to the docs, due to its age