fix: improve backdrop click accuracy

igordanchenko · Aug 10, 2024 · d9ef276 · d9ef276
1 parent e44b034
commit d9ef276
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/src/components/useSensors.ts b/src/components/useSensors.ts
@@ -62,8 +62,10 @@ export default function useSensors() {
         } else if (
           (deltaY > 50 && deltaY > 1.2 * deltaX && ((closeOnPullUp && dy < 0) || (closeOnPullDown && dy > 0))) ||
           (closeOnBackdropClick &&
-            activePointer.current.target instanceof HTMLElement &&
-            activePointer.current.target.className.split(" ").includes(cssClass("slide")))
+            activePointer.current.target instanceof Element &&
+            Array.from(activePointer.current.target.classList).some((className) =>
+              [cssClass("slide"), cssClass("portal")].includes(className),
+            ))
         ) {
           close();
         }

diff --git a/test/Lightbox.spec.tsx b/test/Lightbox.spec.tsx
@@ -95,7 +95,7 @@ describe("Lightbox", () => {
     expectCurrentSlideToBe(1);
   });
 
-  it("supports close on pull up", async () => {
+  it("supports closeOnPullUp", async () => {
     const user = userEvent.setup();
 
     renderLightbox();
@@ -104,7 +104,7 @@ describe("Lightbox", () => {
     await expectLightboxToBeClosed();
   });
 
-  it("supports close on pull down", async () => {
+  it("supports closeOnPullDown", async () => {
     const user = userEvent.setup();
 
     renderLightbox();
@@ -113,6 +113,18 @@ describe("Lightbox", () => {
     await expectLightboxToBeClosed();
   });
 
+  it("supports closeOnBackdropClick", async () => {
+    const user = userEvent.setup();
+
+    renderLightbox();
+    await user.click(querySelector(".yarll__portal")!);
+    await expectLightboxToBeClosed();
+
+    renderLightbox();
+    await user.click(querySelector(".yarll__slide")!);
+    await expectLightboxToBeClosed();
+  });
+
   it("cancels multi-touch gestures", async () => {
     const user = userEvent.setup();