feat: add matchReferenceWidth to DropdownProps (#3166)

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();
     };
 

src/components/Form/Dropdown.tsx

@@ -7,7 +7,7 @@ import type {
   ReactNode,
   Ref,
 } from 'react';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { createRovingFocusKeyDownHandler } from '../../a11y/a11yUtils';
 import {
@@ -18,6 +18,11 @@ import {
 const DEFAULT_DROPDOWN_ITEM_SELECTOR =
   '[role="option"]:not(:disabled), [role="menuitem"]:not(:disabled), button:not(:disabled), a:not(:disabled)';
 
+const isEditableTarget = (target: EventTarget | null) =>
+  target instanceof HTMLInputElement ||
+  target instanceof HTMLTextAreaElement ||
+  (target instanceof HTMLElement && target.isContentEditable);
+
 type DropdownContextValue = {
   close(): void;
 };
@@ -47,6 +52,7 @@ export type DropdownTriggerProps = Pick<
 
 export type DropdownProps = PropsWithChildren<{
   className?: string;
+  matchReferenceWidth?: boolean;
   onClose?: () => void;
   onOpen?: () => void;
   placement?: PopperLikePlacement;
@@ -58,6 +64,7 @@ export type DropdownProps = PropsWithChildren<{
 export const Dropdown = ({
   children,
   className,
+  matchReferenceWidth = false,
   onClose,
   onOpen,
   placement = 'bottom',
@@ -142,18 +149,32 @@ export const Dropdown = ({
     [],
   );
 
+  const escapeConsumedRef = useRef(false);
+
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLElement>) => {
       if (event.key === 'Escape') {
         event.preventDefault();
+        event.stopPropagation();
+        escapeConsumedRef.current = true;
         close();
         return;
       }
+      if (isEditableTarget(event.target)) {
+        return;
+      }
       rovingFocusKeyDownHandler(event);
     },
     [close, rovingFocusKeyDownHandler],
   );
 
+  const suppressEscapeKeyUp = useCallback((event: React.KeyboardEvent<HTMLElement>) => {
+    if (event.key === 'Escape' && escapeConsumedRef.current) {
+      escapeConsumedRef.current = false;
+      event.stopPropagation();
+    }
+  }, []);
+
   const DropdownTriggerComponent = TriggerComponent;
 
   const trigger = DropdownTriggerComponent ? (
@@ -173,10 +194,14 @@ export const Dropdown = ({
             className={clsx('str-chat__dropdown__items', className)}
             onClick={close}
             onKeyDown={handleKeyDown}
+            onKeyUpCapture={suppressEscapeKeyUp}
             ref={setFloatingElement}
             role='menu'
             style={{
               left: x ?? 0,
+              minWidth: matchReferenceWidth
+                ? resolvedReferenceElement.getBoundingClientRect().width
+                : undefined,
               position: strategy,
               top: y ?? 0,
             }}