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

[svarup]

facing the same issue on shadcn dialog and no way to change the animation to fade

[ValentinH]

facing the same issue on shadcn dialog and no way to change the animation to fade

The point of shading/ui is to have the full control in the component code. The animation styles are inside the DialogContent component. Check the different state-open modifiers, there are some related to zoom and translation. Removing them should fix your issue.

[svarup]

Thank you for your response, if we have a method like resetCropSize() then we can easily call it after dialog or model open, because if we have implemented rotation then on rotate it will suddenly fix the issue

[ValentinH]

One way to do this is to add a key prop to the Cropper and change its value (like an incrementing number) once the modal is open.
Otherwise, you can conditionally render the Cropper only when the modal is open.

[svarup]

One way to do this is to add a key prop to the Cropper and change its value (like an incrementing number) once the modal is open. Otherwise, you can conditionally render the Cropper only when the modal is open.

render cropper after the dialog gets open and with some(100 milliseconds) setTimeout delay resolved this issue

[ValentinH]

A nice way to avoid a flash from empty content to the Cropper is to render a plain image by default.

[HasanMothaffar-OSG]

@svarup I am also using shadcn dialog and fixed it by removing the data-[state=open]:zoom-in-95 class from the DialogContent component.