Nested Draggable components : event.stopPropagation() not working on MouseEvents

[augnustin]

trafficstars

I have two nested <Draggable /> components.

I set the handleDrag on the deepest element as so:

  const handleDrag = (e, data) => {
    // Do the job
    e.stopPropagation();
    e.preventDefault();
  }

but even like this, the handleDrag function of the higher element is called. Is that expected? How can I prevent this behavior?

Thanks

[STRML]

Try returning false? Would need to see a codesandbox to be sure.

[odbol]

It worked for me, as long as I called preventDefault() and stopPropagation() from every drag start/stop event, not just onDrag:

export const PrimitiveTooltip: React.FunctionComponent<IPrimitiveTooltipProps> = (props) => {
  const onDragStart = (e: DraggableEvent, data: DraggableData) => {
    e.stopPropagation();
    e.preventDefault();

    console.log("onDragStart", data);
  };
  const onDragStop = (e: DraggableEvent, data: DraggableData) => {
    const {x, y} = data;

    e.stopPropagation();
    e.preventDefault();

    console.log("onDragStop", data);
  };
  const onDrag = (e: DraggableEvent, data: DraggableData) => {
    const {x, y} = data;

    e.stopPropagation();
    e.preventDefault();

    console.log("onDrag", data);
  };

  return (
    <div className="primitiveTooltip">

      <Draggable
          onStart={onDragStart}
          onStop={onDragStop}
          onDrag={onDrag}
          axis="y"
          >
        <div className="bubble">
Dragme
        </div>
      </Draggable>
    </div>
  );
};

[nfplay]

Can confirm @odbol 's behaviour too :)

[csj]

Adding to this idea

export function NonPropagatingDraggable(props: Partial<DraggableProps>) {
  function stopPropagation(e: DraggableEvent) {
    e.stopPropagation()
    e.preventDefault()
  }

  return <Draggable {...props}
                      onDrag={(e, data) => { props.onDrag?.(e, data); stopPropagation(e) }}
                      onStop={(e, data) => { props.onStop?.(e, data); stopPropagation(e) }}
                      onStart={(e, data) => { props.onStart?.(e, data); stopPropagation(e) }}
                        >
    {props.children}
  </Draggable>
}

Usage:

<NonPropagatingDraggable axis={'x'} /* ... other props */>
  /* child element, as usual */
</NonPropagatingDraggable>