feat: respect onCloseAttempt prop in GlobalModal (#2802)

Author: MartinCupela

src/components/Modal/GlobalModal.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import type { PropsWithChildren } from 'react';
+import { useCallback } from 'react';
 import React, { useEffect, useRef } from 'react';
 import { FocusScope } from '@react-aria/focus';
 
@@ -12,41 +13,55 @@ import {
   useModalDialog,
   useModalDialogIsOpen,
 } from '../Dialog';
-import type { ModalProps } from './Modal';
+import type { ModalCloseEvent, ModalCloseSource, ModalProps } from './Modal';
 
 export const GlobalModal = ({
   children,
   className,
   onClose,
+  onCloseAttempt,
   open,
 }: PropsWithChildren<ModalProps>) => {
   const { t } = useTranslationContext('Modal');
 
   const dialog = useModalDialog();
   const isOpen = useModalDialogIsOpen();
   const innerRef = useRef<HTMLDivElement | null>(null);
-  const closeRef = useRef<HTMLButtonElement | null>(null);
+  const closeButtonRef = useRef<HTMLButtonElement | null>(null);
+
+  const maybeClose = useCallback(
+    (source: ModalCloseSource, event: ModalCloseEvent) => {
+      const allow = onCloseAttempt?.(source, event);
+      if (allow !== false) {
+        onClose?.(event);
+        dialog.close();
+      }
+    },
+    [dialog, onClose, onCloseAttempt],
+  );
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {
-    if (innerRef.current?.contains(event.target as HTMLButtonElement | HTMLDivElement))
-      return;
-    onClose?.(event);
-    dialog.close();
+    const target = event.target as HTMLButtonElement | HTMLDivElement;
+    if (!innerRef.current || !closeButtonRef.current) return;
+    if (innerRef.current?.contains(target)) return;
+
+    if (closeButtonRef.current.contains(target)) {
+      maybeClose('button', event);
+    } else if (!innerRef.current.contains(target)) {
+      maybeClose('overlay', event);
+    }
   };
 
   useEffect(() => {
     if (!isOpen) return;
 
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onClose?.(event as unknown as React.KeyboardEvent);
-        dialog.close();
-      }
+      if (event.key === 'Escape') maybeClose('escape', event);
     };
 
     document.addEventListener('keydown', handleKeyDown);
     return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [dialog, onClose, isOpen]);
+  }, [isOpen, maybeClose]);
 
   useEffect(() => {
     if (open && !dialog.isOpen) {
@@ -68,7 +83,7 @@ export const GlobalModal = ({
         <FocusScope autoFocus contain>
           <button
             className='str-chat__modal__close-button'
-            ref={closeRef}
+            ref={closeButtonRef}
             title={t('Close')}
             type='button'
           >

src/components/Modal/Modal.tsx

@@ -7,10 +7,11 @@ import { CloseIconRound } from './icons';
 
 import { useTranslationContext } from '../../context';
 
-type CloseEvent =
+export type ModalCloseEvent =
   | KeyboardEvent
   | React.KeyboardEvent
   | React.MouseEvent<HTMLButtonElement | HTMLDivElement>;
+
 export type ModalCloseSource = 'overlay' | 'button' | 'escape';
 
 export type ModalProps = {
@@ -19,9 +20,9 @@ export type ModalProps = {
   /** Custom class to be applied to the modal root div */
   className?: string;
   /** Callback handler for closing of modal. */
-  onClose?: (event: CloseEvent) => void;
+  onClose?: (event: ModalCloseEvent) => void;
   /** Optional handler to intercept closing logic. Return false to prevent onClose. */
-  onCloseAttempt?: (source: ModalCloseSource, event: CloseEvent) => boolean;
+  onCloseAttempt?: (source: ModalCloseSource, event: ModalCloseEvent) => boolean;
 };
 
 export const Modal = ({
@@ -37,7 +38,7 @@ export const Modal = ({
   const closeButtonRef = useRef<HTMLButtonElement | null>(null);
 
   const maybeClose = useCallback(
-    (source: ModalCloseSource, event: CloseEvent) => {
+    (source: ModalCloseSource, event: ModalCloseEvent) => {
       const allow = onCloseAttempt?.(source, event);
       if (allow !== false) {
         onClose?.(event);

src/components/Modal/__tests__/GlobalModal.test.js

@@ -6,6 +6,9 @@ import '@testing-library/jest-dom';
 import { GlobalModal } from '../GlobalModal';
 import { ModalDialogManagerProvider } from '../../../context';
 
+const CLOSE_BUTTON_SELECTOR = '.str-chat__modal__close-button';
+const OVERLAY_SELECTOR = '.str-chat__modal';
+
 const renderComponent = ({ props } = {}) =>
   render(
     <ModalDialogManagerProvider>
@@ -95,14 +98,96 @@ describe('GlobalModal', () => {
 
   it('should call onClose if the modal overlay is clicked', () => {
     const onClose = jest.fn();
-    const { container, debug } = renderComponent({
+    const { container } = renderComponent({
       props: { children: textContent, onClose, open: true },
     });
-    console.log(debug(container));
+
     const dialogOverlay = container.querySelector('.str-chat__modal');
 
     fireEvent.click(dialogOverlay);
 
     expect(onClose).toHaveBeenCalledTimes(1);
   });
+
+  it('should call onClose if onCloseAttempt returns true and Escape pressed', () => {
+    const onClose = jest.fn();
+    const onCloseAttempt = () => true;
+    renderComponent({
+      props: { children: textContent, onClose, onCloseAttempt, open: true },
+    });
+
+    fireEvent(
+      document,
+      new KeyboardEvent('keydown', {
+        key: 'Escape',
+      }),
+    );
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call onClose if onCloseAttempt returns true and overlay clicked', () => {
+    const onClose = jest.fn();
+    const onCloseAttempt = () => true;
+    const { container } = renderComponent({
+      props: { children: textContent, onClose, onCloseAttempt, open: true },
+    });
+
+    fireEvent.click(container.querySelector(OVERLAY_SELECTOR));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call onClose if onCloseAttempt returns true and close button clicked', () => {
+    const onClose = jest.fn();
+    const onCloseAttempt = () => true;
+    const { container } = renderComponent({
+      props: { children: textContent, onClose, onCloseAttempt, open: true },
+    });
+
+    fireEvent.click(container.querySelector(CLOSE_BUTTON_SELECTOR));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call onClose if onCloseAttempt returns false and Escape pressed', () => {
+    const onClose = jest.fn();
+    const onCloseAttempt = () => false;
+    renderComponent({
+      props: { children: textContent, onClose, onCloseAttempt, open: true },
+    });
+
+    fireEvent(
+      document,
+      new KeyboardEvent('keydown', {
+        key: 'Escape',
+      }),
+    );
+
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('should call onClose if onCloseAttempt returns false and overlay clicked', () => {
+    const onClose = jest.fn();
+    const onCloseAttempt = () => false;
+    const { container } = renderComponent({
+      props: { children: textContent, onClose, onCloseAttempt, open: true },
+    });
+
+    fireEvent.click(container.querySelector(OVERLAY_SELECTOR));
+
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('should call onClose if onCloseAttempt returns false and close button clicked', () => {
+    const onClose = jest.fn();
+    const onCloseAttempt = () => false;
+    const { container } = renderComponent({
+      props: { children: textContent, onClose, onCloseAttempt, open: true },
+    });
+
+    fireEvent.click(container.querySelector(CLOSE_BUTTON_SELECTOR));
+
+    expect(onClose).not.toHaveBeenCalled();
+  });
 });