feat: respect event.defaultPrevented in DialogAnchor in hide on Escape

Author: MartinCupela

src/components/Dialog/__tests__/DialogPortal.test.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import {
+  Dropdown,
+  type DropdownTriggerProps,
+  useDropdownContext,
+} from '../../Form/Dropdown';
 import { useDialogOnNearestManager } from '../hooks';
 import { DialogAnchor } from '../service';
 import { DialogManagerProvider } from '../../../context';
@@ -29,6 +34,32 @@ const DialogFixture = ({
   );
 };
 
+const DropdownTriggerButton = ({
+  children,
+  onClick,
+  referenceRef,
+  ...props
+}: DropdownTriggerProps) => (
+  <button
+    {...props}
+    onClick={onClick}
+    ref={referenceRef as React.Ref<HTMLButtonElement>}
+    type='button'
+  >
+    {children}
+  </button>
+);
+
+const DropdownItem = ({ label }: { label: string }) => {
+  const { close } = useDropdownContext();
+
+  return (
+    <button onClick={close} role='menuitem' type='button'>
+      {label}
+    </button>
+  );
+};
+
 describe('DialogPortal', () => {
   it('does not close dialogs from another manager when clicking in a different manager overlay', async () => {
     render(
@@ -118,4 +149,47 @@ describe('DialogPortal', () => {
     const results = await axe(document.body);
     expect(results).toHaveNoViolations();
   });
+
+  it('does not close the dialog when Escape is handled by a nested dropdown', async () => {
+    render(
+      <DialogManagerProvider>
+        <DialogFixture
+          dialogId='dialog-with-dropdown'
+          testId='dialog-dropdown-content'
+          trapFocus
+        >
+          <Dropdown
+            TriggerComponent={DropdownTriggerButton}
+            triggerProps={{ children: 'Duration' }}
+          >
+            <DropdownItem label='15 minutes' />
+            <DropdownItem label='1 hour' />
+          </Dropdown>
+        </DialogFixture>
+      </DialogManagerProvider>,
+    );
+
+    fireEvent.click(screen.getByTestId('open-dialog-with-dropdown'));
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Duration' }));
+    await screen.findByRole('menu');
+
+    const item = screen.getByRole('menuitem', { name: '15 minutes' });
+    item.focus();
+
+    fireEvent.keyDown(item, { key: 'Escape' });
+    fireEvent.keyUp(item, { key: 'Escape' });
+
+    await waitFor(() => {
+      expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+    });
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+    fireEvent.keyUp(document, { key: 'Escape' });
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+  });
 });

src/components/Dialog/service/DialogAnchor.tsx

@@ -212,7 +212,7 @@ export const DialogAnchor = ({
   useEffect(() => {
     if (!open) return;
     const hideOnEscape = (event: KeyboardEvent) => {
-      if (event.key !== 'Escape') return;
+      if (event.key !== 'Escape' || event.defaultPrevented) return;
       dialog?.close();
     };