Image zoom inside of dialog components - radix/dialog(Vaul, shadcn/ui)

[ogjayp]

Has anyone implemented the image zoom within a radix dialog? - in nextjs

I'm implementing a Drawer component where an image is previewed when the drawer opens, wrapping the Image with Zoom works as expected, you can scroll down and the zoom state resets with the drawer open. When the image is zoomed, once you click on the image to zoom out, you get the image zooming out and the Drawer (radix/dialog) closes.

Ideally the goal is to achieve the same dialog with zoom as in the examples, I'm not sure if the solution is to dig into radix or learn more how to custom construct the zoom modal. -Thanks!

[ogjayp]

This is where i'm implementing the Drawer and looking into if an image zoom is needed: https://www.pixelshare.app/g/72403662/view

obviously users can just download the image on their device and then zoom locally but, I'd like to learn if there's a feasible option so I can test with users

[rpearce]

I fixed a similar problem here: #746

If you're able to put together a small CodeSandbox that demonstrates the issue, I'd be happy to take a look at it.

[ogjayp]

@rpearce that make sense, i'll start testing that out, thank you!

[ogjayp]

For the nextjs app, i added the css to the globals.css and that solved the pointer-events issue! the spacebar key event functions correctly with react-medium-image-zoom, but there are dual events happening with the ESC key event closing the image modal and drawer at the same moment. I'm trying to figure out now what the best solution to handle the ESC key event the same way we control the pointer-events

https://codesandbox.io/p/devbox/wvm755

[rpearce]

That's definitely an issue for me to address. I'll see what I can do over the next couple of days

[rpearce]

@ogjayp After looking into this, it appears that Vaul uses a Radix dismissal tool that ultimately calls this line of code. The problem here is that the Drawer inevitably calls this line before the Zoom one, and so the Zoom one has to get in line behind it and is not able to be the first one to cancel the event (my listener & its handler).

I don't think there's anything I can do from this library's point of view short of creating my own global event listener at script evaluation time and doing some serious hackery internally to try to override everyone else's useCapture/capture: true; however, this would fall down if somebody else did the same and had their script evaluated first.

At this point, there's not much I think I can do for Escape, but I'm open to ideas.

[rpearce]

I do think I will release a patch for adding that pointer-events style to the stylesheet, though.