Changing crop activates drag-and-drop layers below image-crop

[JCQuintas]

I have a setup where I use a react-image-crop inside a dialog/modal that is over a react-beautiful-dnd list.

Whenever I try to change the crop-area it also activates the drag-and-drop below.

This behavior is fixed by adding an e.stopPropagation when the specific events happen and is what we are using internally to fix this right now. But it might be more interesting to expose all the events to the consumer so he can decide when to stopPropagation or what so ever.

[dominictobias]

Hi @JCQuintas if the event is passed to onDragStart and onDragEnd would this help?

[JCQuintas]

I believe it would help, yes. Though I'm not sure if it would fix my exact issue. If you wish, I can try to setup a demo of the interaction tomorrow.

The version we are using in my company is here. But I pretty much put an e.stopPropagation anywhere an event happened. It might not be necessary though.

[Inveth]

Passing and event or returning false on dragStart/End doesn't do anything - problem appears when you try to drag an image that is longer than wider.

[Inveth]

@JCQuintas I've applied an temp fix for now that works on all browsers (expecially needed for IE overflowing problem)

getCropImageMaxSize = () => {
    const { offsetWidth = 0, offsetHeight = 0 } = this.reactCropImageContainer || {};
    return {
      width: offsetWidth,
      height: offsetHeight,
    };
  };

 <div
     id="image-crop-container"
     ref={element => {
          this.reactCropImageContainer = element;
           }}>
          <ReactCrop
            src={uploadedImage.file.base64 || ''}
            crop={croppedImage.crop}
            onImageLoaded={image => this.handleReactCropImageLoaded(image)}
            onChange={crop => this.handleReactCropChange(crop)}
            onComplete={cropImage => this.handleReactCropComplete(cropImage)}
            disabled={disabled}
            imageStyle={{
              maxHeight: this.getCropImageMaxSize().height,
              maxWidth: this.getCropImageMaxSize().width,
            }}
            ref={element => {
              this.reactCropImage = element;
            }}
       />
 </div>

[ShaMan123]

+1