Resizable nested inside of draggable creates drag with resize handler

[blparker]

Given the following code:

<Draggable bounds="parent">
  <Resizable className="box" width={150} height={150} onResizeStart={this.onStart}>
    <div style={{width: '150px', height: '150px' }}>Test</div>
  </Resizable>
</Draggable>

Where <Draggable /> is the react-draggable module, when resizing using the react-resizable-handle, it also triggers the drag of the parent element. Is this an issue or is there a way to 'cancel' the resize from bubbling upwards to the parent draggable?

[geohuz]

Same problem here, any resolution?

[geohuz]

I guess I just found some clues, first you should put cancel prop in the draggable, like this

<Draggable  bounds="parent" cancel=".react-resizable-handle">

Then you need to have a customised onResize function, which draws the resized box, like this:

onResize: function (event: Event, data: Object) {
      let {element, size} = data;
      let {width, height} = size;
      let widthChanged = width !== this.state.width, heightChanged = height !== this.state.height;
      if (!widthChanged && !heightChanged) return;

      //[width, height] = this.runConstraints(width, height);
      console.log(width, height);

      this.setState({width, height}, () => {
        if (this.props.onResize) {
          this.props.onResize(event, {element, size: {width, height}});
        }
      });
    },

the Resizable component will be like this:

<div style={{width: this.state.width + 'px', height: this.state.height + 'px'}}>
    text
</div>

This is very roughly implementation, I found the code in this link:

https://github.com/STRML/react-resizable/blob/master/lib/ResizableBox.jsx

[xedef]

Hey. I've just pushed #82 for this. Please check it out and let me know your comments. Cheers!

[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?