Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useSortable listeners - conflicts with other listeners of the children elements #913

Closed
josias-r opened this issue Oct 13, 2022 · 4 comments

Comments

@josias-r
Copy link

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
Copy link
Author

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
Copy link
Author

josias-r commented Oct 14, 2022

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
Copy link

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
Copy link
Author

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

@josias-r josias-r closed this as not planned Won't fix, can't repro, duplicate, stale May 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants