Mask is does'nt showing the first time

[Djibdjib]

Hi and thx for this tool !

When i open the crop in a modal, the mask is not showed the first time. If i close the modal and re open, all is perfect...

Thx for your help.

[Djibdjib]

Ok i found the solution, i use the onLoad attribute on the image to set the crop values. It works !

[immanu10]

@Djibdjib I'm facing the same issue even though I'm using the onLoad attribute. Do you mind sharing what exactly you did to fix it?

[Djibdjib]

@immanu10 Yeah of course !

const onImageLoad = () => {
        setCrop({
            unit: "%",
            width: currentFile.crop.w || 50,
            height: currentFile.crop.h || 50,
            x: currentFile.crop.x || 25,
            y: currentFile.crop.y || 25,
        });
    };

<ReactCrop
                key={crop}
                crop={crop}
                onChange={(c, p) => onChangeCrop(c, p)}
                className="inline-block rounded-lg"
                keepSelection={true}
                ruleOfThirds={true}
            >
                <img src={currentSrcImage} className="rounded-t-lg" onLoad={onImageLoad} />
            </ReactCrop>

[yuhao-wong]

Adding some context to this - setting the crop onImageLoad didn't work for me.
The crop dimensions will be correctly set, but the mask itself will be broken.

If you inspect the DOM when this happens, it seems like the of the mask SVG has 0x0 dimensions.
I was able to force refresh it on load by doing
document.querySelector(".ReactCrop__crop-mask")?.setAttribute("height", "100%")

I'm curious if there is a better way around this. I am unable to consistently reproduce this issue.

[sekoyo]

Adding some context to this - setting the crop onImageLoad didn't work for me. The crop dimensions will be correctly set, but the mask itself will be broken.

If you inspect the DOM when this happens, it seems like the of the mask SVG has 0x0 dimensions. I was able to force refresh it on load by doing document.querySelector(".ReactCrop__crop-mask")?.setAttribute("height", "100%")

I'm curious if there is a better way around this. I am unable to consistently reproduce this issue.

Is this in a modal as well? Does your modal have some opening animation that changes the height?

[yuhao-wong]

Yes its in a modal, but I am rendering it with React.createPortal.
No animation.

[hanurii]

In my case, the issue was resolved when I didn't provide initial values in the crop's useState.

const [crop, setCrop] = useState();

[ak-pdeshaies]

THANK YOU!!!

Both proposed solution found here worked for me

1. document.querySelector(".ReactCrop__crop-mask")?.setAttribute("height", "100%")
2. Remove default crop value const [crop, setCrop] = useState();

I ended up using option 2. FYI, if you need to specify a crop do it on imageLoad with setCrop({ ... }) That's how I'm doing it and I fixed the issue I was having. \o/