Cropper component cannot move to the edges of an image when used inside a modal.

[Dinishka]

Describe the bug
I am using react-easy-crop with mantine components. Currently I am loading the cropper component inside a mantine modal. The issue is when the cropper is loaded inside a modal, I can't move it to the edges of the selected image (it's like padded). One thing I noticed is that when I open the modal and then open the console from the same window (from right, left or bottom), the above mentioned issue goes away.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/fervent-pine-xiucoj
2. Click on 'Open cropping dialog'
3. Select an image from the file system
4. Try to move the cropper to edges of the image

Expected behavior
Should be able to move the cropper anywhere inside the selected image, so we can crop any part form that image.

[ValentinH]

This is due to the opening animation of the modal conflicting with the internal logic of the cropper to compute its size.
When you resize the window, it makes the cropper recomputes its size so that's why it fixes the issue.

You can fix this by changing the animation to fade to avoid the cropper size to change while the modal is opening. See this sandbox: https://codesandbox.io/s/gallant-brown-ixjdd3

If you really don't want to change the animation, you need to wait until the animation is complete to actually render the cropper.

[Dinishka]

Thank you so much. Closing this issue because it has resolved with the given solution.

[ljrahn]

oh my thank you. i could have spent hours on this, but luckily i only spent an hour xD