Make photo album modal dismissable

This required adding a ref to the modal and making the dropdown use this ref as the container. It previously used document.body as the container, meaning any clicks in the dropdown were counted as outside the modal and closed the modal.
webkom · Oct 30, 2024 · eaba04b · eaba04b
1 parent 1fe85d2
commit eaba04b
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 46 deletions.
diff --git a/app/routes/photos/components/GalleryPictureModal.tsx b/app/routes/photos/components/GalleryPictureModal.tsx
@@ -8,7 +8,7 @@ import {
 import { usePreparedEffect } from '@webkom/react-prepare';
 import throttle from 'lodash/throttle';
 import { Download, Pencil } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Link, useParams, useNavigate, Outlet } from 'react-router-dom';
 import { useSwipeable, RIGHT, LEFT } from 'react-swipeable';
 import { updateGalleryCover } from 'app/actions/GalleryActions';
@@ -148,6 +148,9 @@ const GalleryPictureModal = () => {
   const gallery = useAppSelector((state) =>
     selectGalleryById<DetailedGallery>(state, galleryId),
   );
+
+  const modalRef = useRef<HTMLElement>(null);
+
   const actionGrant = gallery?.actionGrant || [];
 
   const isFirstImage =
@@ -281,10 +284,10 @@ const GalleryPictureModal = () => {
   return (
     <Modal
       onOpenChange={(open) => !open && navigate(`/photos/${gallery.id}`)}
-      isDismissable={false} // Avoid closing the modal when pressing something from the dropdown
       isOpen
       contentClassName={styles.content}
       aria-label={`Bilde ${picture.id} av ${gallery.title}`}
+      ref={modalRef}
     >
       <PropertyHelmet
         propertyGenerator={propertyGenerator}
@@ -320,6 +323,7 @@ const GalleryPictureModal = () => {
               closeOnContentClick
               className={styles.dropdown}
               iconName="ellipsis-horizontal"
+              container={modalRef.current}
             >
               <Dropdown.List>
                 <Dropdown.ListItem>

diff --git a/packages/lego-bricks/src/components/Modal/Modal.tsx b/packages/lego-bricks/src/components/Modal/Modal.tsx
@@ -1,5 +1,6 @@
 import cx from 'classnames';
 import { X } from 'lucide-react';
+import { forwardRef } from 'react';
 import {
   Dialog,
   Heading,
@@ -50,49 +51,57 @@ type Props = {
  * </DialogTrigger>
  * ```
  */
-const Modal = ({
-  isOpen,
-  onOpenChange,
-  isDismissable = true,
-  contentClassName,
-  dialogRole,
-  title,
-  children,
-}: Props) => {
-  return (
-    <ModalOverlay
-      isOpen={isOpen}
-      onOpenChange={onOpenChange}
-      isDismissable={isDismissable}
-      isKeyboardDismissDisabled={!isDismissable}
-      className={styles.overlay}
-    >
-      <AriaModal className={cx(styles.modal, contentClassName)}>
-        <Dialog role={dialogRole} data-test-id="Modal__content">
-          {({ close }) => (
-            <>
-              {title && (
-                <Heading slot="title" className={styles.title}>
-                  {title}
-                </Heading>
-              )}
-              <Icon
-                iconNode={<X />}
-                onPress={close}
-                className={styles.closeButton}
-                data-test-id="Modal__closeButton"
-                // Fix to avoid clicking the element behind the modal when using touch devices
-                ref={(ref) =>
-                  ref?.addEventListener('touchend', (e) => e.preventDefault())
-                }
-              />
-              {typeof children === 'function' ? children({ close }) : children}
-            </>
-          )}
-        </Dialog>
-      </AriaModal>
-    </ModalOverlay>
-  );
-};
+const Modal = forwardRef<HTMLElement, Props>(
+  (
+    {
+      isOpen,
+      onOpenChange,
+      isDismissable = true,
+      contentClassName,
+      dialogRole,
+      title,
+      children,
+    },
+    ref,
+  ) => {
+    return (
+      <ModalOverlay
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        isDismissable={isDismissable}
+        isKeyboardDismissDisabled={!isDismissable}
+        className={styles.overlay}
+      >
+        <AriaModal className={cx(styles.modal, contentClassName)}>
+          <Dialog role={dialogRole} data-test-id="Modal__content" ref={ref}>
+            {({ close }) => (
+              <>
+                {title && (
+                  <Heading slot="title" className={styles.title}>
+                    {title}
+                  </Heading>
+                )}
+                <Icon
+                  iconNode={<X />}
+                  onPress={close}
+                  className={styles.closeButton}
+                  data-test-id="Modal__closeButton"
+                  // Fix to avoid clicking the element behind the modal when using touch devices
+                  ref={(ref) =>
+                    ref?.addEventListener('touchend', (e) => e.preventDefault())
+                  }
+                />
+                {typeof children === 'function'
+                  ? children({ close })
+                  : children}
+              </>
+            )}
+          </Dialog>
+        </AriaModal>
+      </ModalOverlay>
+    );
+  },
+);
+Modal.displayName = 'Modal';
 
 export default Modal;