Merge pull request #1935 from dxc-technology/Mil4n0r/dialog_interaction_esc

Dialog popups interaction (Escape) fix

Author: GomezIvann

lib/src/date-input/DateInput.tsx

@@ -143,10 +143,13 @@ const DxcDateInput = React.forwardRef<RefType, DateInputPropsType>(
       setIsOpen(false);
     };
 
-    const handleDatePickerEscKeydown = (event) => {
-      event.preventDefault();
-      closeCalendar();
-      dateRef?.current.getElementsByTagName("input")[0].focus();
+    const handleDatePickerEscKeydown = (event: React.KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        isOpen && event.stopPropagation();
+        closeCalendar();
+        dateRef?.current.getElementsByTagName("input")[0].focus();
+      }
     };
     const handleDatePickerOnBlur = (event) => {
       if (!event?.currentTarget.contains(event.relatedTarget)) closeCalendar();
@@ -156,7 +159,7 @@ const DxcDateInput = React.forwardRef<RefType, DateInputPropsType>(
       <ThemeProvider theme={colorsTheme}>
         <div ref={ref}>
           <Popover.Root open={isOpen}>
-            <Popover.Trigger asChild aria-controls={undefined} >
+            <Popover.Trigger asChild aria-controls={undefined}>
               <DxcTextInput
                 label={label}
                 name={name}
@@ -189,7 +192,7 @@ const DxcDateInput = React.forwardRef<RefType, DateInputPropsType>(
                 align="end"
                 aria-modal={true}
                 onBlur={handleDatePickerOnBlur}
-                onEscapeKeyDown={handleDatePickerEscKeydown}
+                onKeyDown={handleDatePickerEscKeydown}
                 avoidCollisions={false}
               >
                 <DxcDatePicker id={calendarId} onDateSelect={handleCalendarOnClick} date={dayjsDate} />

lib/src/dialog/Dialog.stories.tsx

@@ -11,7 +11,7 @@ import DxcHeading from "../heading/Heading";
 import DxcParagraph from "../paragraph/Paragraph";
 import DxcAlert from "../alert/Alert";
 import { userEvent, within } from "@storybook/testing-library";
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
 
 export default {
   title: "Dialog",
@@ -368,4 +368,3 @@ ScrollDialog.play = async ({ canvasElement }) => {
   await userEvent.tab();
   await userEvent.tab();
 };
-

lib/src/dialog/Dialog.test.js

@@ -12,6 +12,18 @@ import DxcCard from "../card/Card.tsx";
 import DxcRadioGroup from "../radio-group/RadioGroup.tsx";
 import DxcSlider from "../slider/Slider.tsx";
 import DxcSwitch from "../switch/Switch.tsx";
+import DxcDateInput from "../date-input/DateInput.tsx";
+
+// Mocking DOMRect for Radix Primitive Popover
+global.globalThis = global;
+global.DOMRect = {
+  fromRect: () => ({ top: 0, left: 0, bottom: 0, right: 0, width: 0, height: 0 }),
+};
+global.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
 
 const options = [
   { label: "Female", value: "female" },
@@ -57,6 +69,19 @@ describe("Dialog component tests", () => {
     fireEvent.keyDown(getByRole("dialog"), { key: "Escape", code: "Escape", keyCode: 27, charCode: 27 });
     expect(onCloseClick).toHaveBeenCalled();
   });
+
+  test("Does not call function onCloseClick when 'Escape' key is pressed while a child popover is opened", async () => {
+    const onCloseClick = jest.fn();
+    const { getByRole } = render(
+      <DxcDialog onCloseClick={onCloseClick}>
+        <DxcDateInput label="With format M-dd-yyyy" format="M-dd-yyyy" />
+      </DxcDialog>
+    );
+    const calendarAction = getByRole("combobox");
+    await userEvent.click(calendarAction);
+    fireEvent.keyDown(document.activeElement, { key: "Escape", code: "Escape", keyCode: 27, charCode: 27 });
+    expect(onCloseClick).not.toHaveBeenCalled();
+  });
 });
 
 describe("Dialog component: Focus lock tests", () => {

lib/src/dropdown/Dropdown.tsx

@@ -127,6 +127,7 @@ const DxcDropdown = ({
         case "Esc":
         case "Escape":
           event.preventDefault();
+          isOpen && event.stopPropagation();
           handleOnCloseMenu();
           triggerRef.current?.focus();
           break;
@@ -186,7 +187,11 @@ const DxcDropdown = ({
               <DropdownTriggerContent>
                 {label && iconPosition === "after" && <DropdownTriggerLabel>{label}</DropdownTriggerLabel>}
                 {icon && (
-                  <DropdownTriggerIcon disabled={disabled} role={typeof icon === "string" ? undefined : "img"} aria-hidden>
+                  <DropdownTriggerIcon
+                    disabled={disabled}
+                    role={typeof icon === "string" ? undefined : "img"}
+                    aria-hidden
+                  >
                     {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}
                   </DropdownTriggerIcon>
                 )}

lib/src/select/Select.tsx

@@ -168,7 +168,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>(
   ): JSX.Element => {
     const selectId = `select-${useId()}`;
     const selectLabelId = `label-${selectId}`;
-    const searchableInputId = `searchable-input-${selectId}`
+    const searchableInputId = `searchable-input-${selectId}`;
     const errorId = `error-${selectId}`;
     const optionsListId = `${selectId}-listbox`;
     const [innerValue, setInnerValue] = useState(defaultValue ?? (multiple ? [] : ""));
@@ -282,6 +282,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>(
         case "Esc":
         case "Escape":
           event.preventDefault();
+          isOpen && event.stopPropagation();
           closeOptions();
           setSearchValue("");
           break;

lib/src/text-input/TextInput.tsx

@@ -269,6 +269,7 @@ const DxcTextInput = React.forwardRef<RefType, TextInputPropsType>(
         case "Esc":
         case "Escape":
           event.preventDefault();
+          isOpen && event.stopPropagation();
           if (hasSuggestions(suggestions)) {
             changeValue("");
             isOpen && closeSuggestions();