onImageLoad doesn't work

[EinTheFrog]

Bug Description Function onImageLoad is not called sometimes and I don't know why. Sometimes it does and sometimes it doesn't, its behaviour differs even when code doesn't change.

I'm using this code snippet provided as an answer for other issue: https://codesandbox.io/p/sandbox/react-lasso-select-issue2-h92hn?file=%2Fsrc%2FApp.tsx%3A32%2C9-32%2C45

Code

My modified code version (I removed some additional UI elements for clarity):

export default function ZoneEditor() {
    const polygonParentRef = useRef<HTMLElement | undefined>();
    const [editor_image_src] = useState("/photo.jpg");
    const [img, setImg] = useState({ width: 600, height: 400 });
    const [width, setWidth] = useState(600);
    const [points, setPoints] = useState<Point[]>([]);
    const [savedPoints, setSavedPoints] = useState<Point[]>([]);

    useEffect(() => {
      if (polygonParentRef.current == undefined) return;

      const resizeObserver = new ResizeObserver(() => {
        if(polygonParentRef.current.offsetWidth !== width) {
          setWidth(polygonParentRef.current.offsetWidth); 
        }
      });

      resizeObserver.observe(polygonParentRef.current);

      return function cleanup() {
        resizeObserver.disconnect();
      }
    }, [polygonParentRef.current]);

    return (
            <Box
                position="relative"
                ref={polygonParentRef}
            >
                <ReactLassoSelect
                    value={points}
                    src={editor_image_src}
                    onChange={(path) => {
                        setPoints(path);
                    }}
                    onImageLoad={(e) => {
                        console.log("on Image loaded");
                        const img = e.target as HTMLImageElement;
                        setImg({
                            width: img.naturalWidth,
                            height: img.naturalHeight
                        });
                    }}
                />
                <svg
                    viewBox={`0 0 ${img.width} ${img.height}`}
                    style={{ position: "absolute", top: "0px", left: "0px", pointerEvents: "none" }}
                >
                    <polyline fill="red" points={pointsToString(savedPoints)} />
                </svg>
            </Box>
    );
}

In the removed code I saved points to savedPoints on button click so I don't think it can affect onImageLoad function in any way.

Browser Version Chrome 129 on Windows 11

[EinTheFrog]

Was able to find a workaround:

useEffect(() => {
        const image= new Image();
        image.src = editor_image_src; 
        image.onload = () => {
          setImg({
            width: image.width,
            height: image.height,
          });
        };
    }, []);

[akcyp]

Hi @EinTheFrog, thanks for reporting the issue, but I couldn't reproduce it. I assume the <Box /> component you're using is from the @mui/material package? Here's what I tried: https://codesandbox.io/p/sandbox/react-lasso-select-issue-6-tccpd2 If the problem persists even in the example I provided, please provide information about the browser you're using.