Add stopPropagation call when resizing

[xedef]

Solves #18

What was done

Added a call to stopPropagation on resizeHandle callback to avoid the propagation of the event.

Docs

• Provided an example on how to use both Draggable and Resizable at the same time in TestLayout.
• README updated

[kutyepov]

I don't think this is necessary to prevent propagation inside the library itself.
If one needs to stop propagation of the event, they could do:
onResize(ev) { ev.stopPropagation(); } and so on whereas needed.

[chrisdevereux]

Would be great if this could be merged :)

[rtxu]

I don't think this is necessary to prevent propagation inside the library itself.
If one needs to stop propagation of the event, they could do:
onResize(ev) { ev.stopPropagation(); } and so on whereas needed.

the solution does not work

[nasiruddin-saiyed]

@rtxu any solution for using it as HOC ?

[rtxu]

@nasiruddin-saiyed I am still trying to figure out why e.stopPropagation() doesn't work for my case. I'll post the result once I confirmed.

[rtxu]

I reproduced my scenario in here.
I think it is a special case. I use Resizable inside a useDrag element (react-dnd). And when resizing, the drag event is propagates to the useDrag-element.

I tried to use e.stopPropagation(), but it didn't work. Then I gave e.preventDefault() a try and It worked !!

Anyone can help me know why?

@nasiruddin-saiyed

[nasiruddin-saiyed]

I reproduced my scenario in here.
I think it is a special case. I use Resizable inside a useDrag element (react-dnd). And when resizing, the drag event is propagates to the useDrag-element.

I tried to use e.stopPropagation(), but it didn't work. Then I gave e.preventDefault() a try and It worked !!

Anyone can help me know why?

@nasiruddin-saiyed

@rtxu i haven't tried yet but i'll take a look at your repo when i'm little free.

Lastly what i did was wrap <div> drop event onto my HOC which resolve this issue but at some point i haven't resolve dragging issue

[twolfson]

If anyone else is still waiting for this to land, a friendly reminder that this patch can be copied via monkey patching:

const { Resizable, ResizableBox } = require('react-resizable');
let _resizeHandler = Resizable.prototype.resizeHandler;
Resizable.prototype.resizeHandler = function () {
  let resultFn = _resizeHandler.apply(this, arguments);
  return function (e) {
    let result = resultFn.apply(this, arguments);
    e.stopPropagation();
    return result;
  };
};
// Still use ResizableBox later on in code

Oddly I needed to omit the recommended div to get my code to work

[michelts]

I'm also using react-draggable and react-resizable together. In order to avoid conflicts, I had to apply stopPropagation on my custom ResizeHandle's onMouseDown, onMouseUp and onTouchEnd. E.g.:

const ResizeHandle = forwardRef((
  {
    onMouseDown,
    onMouseUp,
    onTouchEnd,
    ...
  },
  ref
) => {
  const handleMouseDown = (evt) => {
    evt.stopPropagation();
    onMouseDown(evt);
  }

  const handleMouseUp = (evt) => {
    evt.stopPropagation();
    onMouseUp(evt);
  }

  const handleTouchEnd = (evt) => {
    evt.stopPropagation();
    onTouchEnd(evt);
  }

  return (
    <button
      ref={ref}
      onMouseDown={handleMouseDown}
      onMouseUp={handleMouseUp}
      onTouchEnd={handleTouchEnd}
      ...
    />
  )
});

This way I could avoid monkey-patching the component. Also, I could avoid wrapping the Resizable in a div by using a nodeRef in the draggable component:

  const nodeRef = useRef(null);
  return (
    <Draggable
      nodeRef={nodeRef}
      ...
    >
      <Resizable
        handle={(axis, ref) => <ResizeHandle ref={ref} axis={axis} />}
        ...
      >
        <div
          ref={nodeRef}
          ....
        />
      </Resizable>
    </Draggable>
  )