preventDefault for the un-zoom button

[kayvaninvemo]

react-medium-image-zoom/source/Controlled.tsx

Line 260 in 4ad2a9c

onClick={handleUnzoom}

here we need to preventDefault, otherwise it causes un expected behaviour if the zoom component it self is inside a dialog.

[rpearce]

@kayvaninvemo do you have time to put an example into a CodeSandbox that I can test with?

[rpearce]

@kayvaninvemo I unfortunately don't yet understand what the problem is. If you can help me understand it with a demo, that would be helpful.

[tjx666]

@rpearce

try here: https://stackblitz.com/edit/vitejs-vite-nddcft?file=src%2FApp.tsx

1. click button to open dialog
2. click image in dialog to open zoomed image
3. click the zoomed image
   • expect: only exit the zommed state, but keep dialog open
   • actual: not only exit the zoomed state, but also exit modal

[kayvaninvemo]

@tjx666 this is exactly my issue. I did a workaround here

      onClose={(e: any) => {
        if (e.target?.id?.match(/rmiz-modal-.*/)) {
          return;
        }
        handleClose();
      }}

[rpearce]

@tjx666 @kayvaninvemo Got it! Will fix. Many thanks for y'all's patience and sharing info.

[rpearce]

Well, I thought this would be fixed in react-medium-image-zoom@5.2.11, but I went back to that stackblitz, updated the package.json, re-installed, and gave it a whirl, but no difference.

Could one of y'all give this a try for me? It's not impossible @mui/material is doing something unexpected.

[djaffer]

If zoom is used for an image inside the dialog. When unzoomed it closes the dialog too.

[rpearce]

@djaffer This was not the case for me when I tested with a plain dialog element. Are you also using @mui/material?

[djaffer]

Yes. I fixed by using @kayvaninvemo answer. Thanks to him.