Default cropsize is {width: 0, height: 0}

[nickisyourfan]

Describe the bug
Hello! I think maybe I found a bug? I have been messing with this for a few hours and am stumped... The first time I used this inside a modal it worked great! This time, I am using it inside a modal with a collapse and am getting a default cropSize of {width: 0, height: 0} -- I have checked the docs a ton and read through the issues but can't seem to find one that matches what I am experiencing.

Either way - I am loving the package and hope that this is just me missing something crazy obvious - I have tried to set the default crop size manually - but that makes it so the image does not get centered by default.

I have attached a quick video to show my problem... and some code below.

Funny part is, if I resize the window, it recalculates the cropSize and it works.

  <CCollapse show={showCropper} className="my-2">
      <CContainer
        className="position-relative"
        style={{ height: "60vh", width: "75%", position: "relative" }}
      >
        <Cropper
          image={inputImg}
          crop={crop}
          zoom={zoom}
          aspect={aspect}
          onCropChange={onCropChange}
          onCropComplete={onCropComplete}
          onZoomChange={onZoomChange}
        />
      </CContainer>
      <CButton
        color="success"
        className="w-75"
        style={{ borderTopRightRadius: 0, borderTopLeftRadius: 0 }}
      >
        Save New Version
      </CButton>
    </CCollapse>

I have also forced this not to load unless the image is loaded, without luck.

Thanks for the help!

Quick Video of Problem:
https://user-images.githubusercontent.com/62756900/122150245-f59f4d80-ce22-11eb-935f-e12c75b1fc46.mp4

[ValentinH]

This is a classic issue of showing an element that needs to know it's side in a modal: you should only instantiate it when the modal is open.

You can add a condition to only render the cropper once the modal is open.

[nickisyourfan]

Thanks so much for your response! Sorry that it might have been a dumb question! Condition added and it works great - I wish you the best of luck with the future of this package!

[ValentinH]

There is no dumb question! Thanks for the kind words.

[AndreiTS]

Hi, I'm having the same problem, how do I wait for the modal to show?

[ValentinH]

It depends on what modal you use. If you provide an example on CodeSandbox, I can help you 😉

[AndreiTS]

https://codesandbox.io/s/basic-antd-4-17-3-forked-gj9zz?file=/index.js

[ValentinH]

Here's a fixed version: https://codesandbox.io/s/basic-antd-4-17-3-forked-wxf4b?file=/index.js

There were a few things to do:

• set the bodyStyle to have position: 'relative'
• disable opening animation (otherwise, the container size is not correct at the moment where the Cropper is rendered)
• only render the Cropper element when isModalVisible is shown

[AndreiTS]

Thank you

[YuJian920]

I happened to have this problem, thanks a lot!

[ValentinH]

I'm actually planning to try using a ResizeObserver to automatically reset the internal cropper state when the parent component size changes. This should fix the cases where the cropper is inside the Modal and remove the need to do custom logic from developers using it. 🤞