fix(Modal): call onClose on close (#2622)

reported on slack

.changeset/kind-eyes-cheat.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+Modal: Fix `onClose` not being called

packages/react/src/components/Modal/Modal.stories.tsx

@@ -151,7 +151,7 @@ export const ModalWithForm: StoryFn<typeof Modal> = () => {
   return (
     <Modal.Context>
       <Modal.Trigger>Open Modal</Modal.Trigger>
-      <Modal ref={modalRef} onClose={() => setInput('')}>
+      <Modal ref={modalRef} onClose={() => setInput('')} backdropClose>
         <Heading size='xs' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
           Modal med skjema
         </Heading>

packages/react/src/components/Modal/Modal.test.tsx

@@ -111,4 +111,22 @@ describe('Modal', () => {
     await render({ children, open: true });
     expect(screen.getByText(children)).toBeInTheDocument();
   });
+
+  it('should call onClose when the modal is closed with ESC', async () => {
+    const onClose = vi.fn();
+    await render({ open: true, onClose });
+    const dialog = screen.getByRole('dialog');
+    await act(async () => await userEvent.type(dialog, '{Escape}'));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call onClose when the modal is closed with the close button', async () => {
+    const onClose = vi.fn();
+    await render({ open: true, onClose });
+    const closeButton = screen.getByRole('button', { name: CLOSE_LABEL });
+    await act(async () => await userEvent.click(closeButton));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
 });

packages/react/src/components/Modal/Modal.tsx

@@ -75,6 +75,14 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(function Modal(
     };
   }, [backdropClose]);
 
+  /* handle closing */
+  useEffect(() => {
+    const handleClose = () => onClose?.();
+
+    modalRef.current?.addEventListener('close', handleClose);
+    return () => modalRef.current?.removeEventListener('close', handleClose);
+  }, [onClose]);
+
   return (
     <Component className={cl('ds-modal', className)} ref={mergedRefs} {...rest}>
       {closeButton !== false && (

test/vitest.setup.ts

@@ -15,6 +15,11 @@ class ResizeObserver {
 }
 window.ResizeObserver = ResizeObserver;
 
+/**
+ * TODO: Remove mock of Dialog element when jsdom supports it
+ * issue: https://github.com/jsdom/jsdom/issues/3294
+ */
+
 HTMLDialogElement.prototype.show = vi.fn(function mock(
   this: HTMLDialogElement,
 ) {
@@ -31,6 +36,16 @@ HTMLDialogElement.prototype.close = vi.fn(function mock(
   this: HTMLDialogElement,
 ) {
   this.open = false;
+  /* dispatch close event */
+  this.dispatchEvent(new Event('close'));
+});
+
+/* add support for checking ESC key */
+document.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape') {
+    const dialog = document.querySelector('dialog');
+    dialog?.close();
+  }
 });
 
 // Add support for dialog form method