From e1c44ba1a899330f9bb546b5c16308807b396575 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 13 Jun 2024 20:57:50 -0400
Subject: [PATCH] fix: Exiting lightbox unfocuses image causing rerender
 part-way through transition, closes #7034

---
 shared/editor/components/ImageZoom.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/shared/editor/components/ImageZoom.tsx b/shared/editor/components/ImageZoom.tsx
index 9a08d71d9..2abe38bb2 100644
--- a/shared/editor/components/ImageZoom.tsx
+++ b/shared/editor/components/ImageZoom.tsx
@@ -1,6 +1,7 @@
 import { transparentize } from "polished";
 import * as React from "react";
 import styled, { createGlobalStyle } from "styled-components";
+import EventBoundary from "~/components/EventBoundary";
 import { s } from "../../styles";
 import { EditorStyleHelper } from "../styles/EditorStyleHelper";
 
@@ -35,12 +36,14 @@ export const ImageZoom = ({ caption, children }: Props) => {
   return (
     <React.Suspense fallback={fallback}>
       <Styles />
-      <Zoom
-        zoomMargin={EditorStyleHelper.padding}
-        ZoomContent={(props) => <Lightbox caption={caption} {...props} />}
-      >
-        <div>{children}</div>
-      </Zoom>
+      <EventBoundary>
+        <Zoom
+          zoomMargin={EditorStyleHelper.padding}
+          ZoomContent={(props) => <Lightbox caption={caption} {...props} />}
+        >
+          <div>{children}</div>
+        </Zoom>
+      </EventBoundary>
     </React.Suspense>
   );
 };