Prevent dragging element when interacting with its children elements

[danylo-holovenko]

Is there any way to prevent element dragging while interacting with its content? It's strange because the Modal component is a portal, which means it's not inside the draggable element's DOM.
If I move the modal outside the draggable component it works fine, but due to project structure it is required that the modal should be inside the draggable component

Example: https://codesandbox.io/s/dnd-kit-portaled-input-forked-kfskb8?file=/src/SortableItem.js

Screen.Recording.2022-07-11.at.14.25.22.mov

Thank you!

[awgv]

Hey,

It's strange because the Modal component is a portal, which means it's not inside the draggable element's DOM.

It doesn’t matter—that’s how event bubbling works through portals in a React tree, and here’s the relevant thread (facebook/react#11387) if you want to read the whole thing. Take a look at this solution; adding event handlers to the div at line 56 works, but I’m not sure which drag/mouse events you need to keep, so you’ll have to sift through them all.

[danylo-holovenko]

@awgv It works, thank you!

[josias-r]

Just saw this issue too, after ending up on that react issue, after I opened a very similar issue in this repo:
#913

Not sure if that workaround with stopPropagating directly inside the portal is good enough for us, because we don't have direct access to the Portal instance, since the modal is from a library too.

But I will certainly check out what options we have, something similar on a lower level might work for us too.

[davidystephenson]

I was able to solve the problem by stopping the mouseDown event from propagating on the children.

[AbdelrahmanAbounida]

I solved it like that

{/** child **}
<div
        onMouseDown={(event) => {
          event.stopPropagation();
        }}
        className="p-4 font-semibold border-b-2 text-left flex flex-row cursor-default justify-between items-center"
      >
You can't  drag me 
</div> 

[Itzadetunji]

This does not work for me @danylo-holovenko
For some reason the event.stopPropagation() is not just working

<motion.section
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
animate={{
opacity: 1,
transition: { duration: 0.4, ease: "easeInOut" },
}}
onClick={onClose}
className="font-villeray fixed bottom-0 left-0 right-0 top-0 z-[6000] flex w-full items-center justify-center bg-[#000]/40 "
onMouseDown={(event) => {
event.stopPropagation();
}}
>
<motion.div
exit={{ opacity: 0 }}
initial={{ opacity: 0, y: 40, scale: 0.98 }}
animate={{
opacity: 1,
y: 0,
scale: 1,
transition: { duration: 0.4, ease: "easeInOut" },
}}
onClick={(e) => e.stopPropagation()}
className={scrollbar-hide z-[6000] mx-4 flex h-full max-h-[calc(100vh-16px)] w-full items-center justify-center overflow-visible overflow-y-scroll rounded-[10px]}
>
{children}
</motion.div>
</motion.section>