Cannot focus inputs inside of draggable items
See original GitHub issueHey @clauderic, love the project and the API. Great work.
We have an application where we are rendering layers in a sortable list that can each open a popup with some inputs. While integrating dnd-kit, I ran into an issue where I couldn’t focus any inputs in a portaled popup. I also noticed that I can still drag the popup due to the pointer events being bubbled through the synthetic tree.
We’ve dealt with similar issues in our app, and have solved it by checking if event.currentTarget.contains(event.target)
before calling preventDefault
and doing our behavior.
I was wondering if you’ve got a good way to solve this?
Here’s a Codesandbox with an example.
Edit. Just wanted to clarify that I am setting activationContraint: { distance: 5 }
to enable click behavior.
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (2 by maintainers)
I’m having a similar issue. My draggable items have an
<input>
inside, which won’t be allowed to focus on user click. @clauderic it could be great if you could add a config to disable this line (perhaps as aDndContext
prop?).In the meantime, I did this dirty hack in my code:
onActivate
fixed the issue when you are trying to focus, but if you are trying to select text in the input, draggable items are moving. You could try to select text in the input here (focusing works fine).