fix: switch to onClick from onMouseDown in modal components (#16847)

* fix: switch onmousedown to onclick handler in modal components * fix: include user onclick * fix: added test * fix: include test --------- Co-authored-by: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>
carbon-design-system · Jul 16, 2024 · b12ac2e · b12ac2e
1 parent 3aee680
commit b12ac2e
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 4 deletions.
diff --git a/packages/react/src/components/ComposedModal/ComposedModal-test.js b/packages/react/src/components/ComposedModal/ComposedModal-test.js
@@ -249,4 +249,20 @@ describe('ComposedModal', () => {
       expect(container.firstChild).toHaveClass(`${prefix}--modal--slug`);
     });
   });
+
+  it('should handle onClick events', async () => {
+    const onClick = jest.fn();
+    render(
+      <ComposedModal open onClick={onClick}>
+        <p>
+          Custom domains direct requests for your apps in this Cloud Foundry
+          organization to a URL that you own. A custom domain can be a shared
+          domain, a shared subdomain, or a shared domain and host.
+        </p>
+      </ComposedModal>
+    );
+    const modal = screen.getByRole('dialog');
+    await userEvent.click(modal);
+    expect(onClick).toHaveBeenCalled();
+  });
 });
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.tsx b/packages/react/src/components/ComposedModal/ComposedModal.tsx
@@ -27,6 +27,7 @@ import wrapFocus, {
 import { usePrefix } from '../../internal/usePrefix';
 import { keys, match } from '../../internal/keyboard';
 import { useFeatureFlag } from '../FeatureFlags';
+import { composeEventHandlers } from '../../tools/events';
 
 export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
   /** Specify the content to be placed in the ModalBody. */
@@ -288,7 +289,7 @@ const ComposedModal = React.forwardRef<HTMLDivElement, ComposedModalProps>(
       onKeyDown?.(event);
     }
 
-    function handleMousedown(evt: React.MouseEvent<HTMLDivElement>) {
+    function handleOnClick(evt: React.MouseEvent<HTMLDivElement>) {
       const target = evt.target as Node;
       evt.stopPropagation();
       if (
@@ -423,7 +424,7 @@ const ComposedModal = React.forwardRef<HTMLDivElement, ComposedModalProps>(
         ref={ref}
         aria-hidden={!open}
         onBlur={!focusTrapWithoutSentinels ? handleBlur : () => {}}
-        onMouseDown={handleMousedown}
+        onClick={composeEventHandlers([rest?.onClick, handleOnClick])}
         onKeyDown={handleKeyDown}
         className={modalClass}>
         <div

diff --git a/packages/react/src/components/Modal/Modal-test.js b/packages/react/src/components/Modal/Modal-test.js
@@ -512,6 +512,22 @@ describe('events', () => {
     expect(onRequestClose).toHaveBeenCalled();
   });
 
+  it('should handle onClick events', async () => {
+    const onClick = jest.fn();
+    render(
+      <Modal open onClick={onClick}>
+        <p>
+          Custom domains direct requests for your apps in this Cloud Foundry
+          organization to a URL that you own. A custom domain can be a shared
+          domain, a shared subdomain, or a shared domain and host.
+        </p>
+      </Modal>
+    );
+    const modal = screen.getByRole('dialog');
+    await userEvent.click(modal);
+    expect(onClick).toHaveBeenCalled();
+  });
+
   it('should handle submit keyDown events with shouldSubmitOnEnter enabled', async () => {
     const onRequestSubmit = jest.fn();
     render(

diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx
@@ -30,6 +30,7 @@ import { Text } from '../Text';
 import { ReactAttr } from '../../types/common';
 import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
 import { useFeatureFlag } from '../FeatureFlags';
+import { composeEventHandlers } from '../../tools/events';
 
 const getInstanceId = setupGetInstanceId();
 
@@ -312,7 +313,7 @@ const Modal = React.forwardRef(function Modal(
     }
   }
 
-  function handleMousedown(evt: React.MouseEvent<HTMLDivElement>) {
+  function handleOnClick(evt: React.MouseEvent<HTMLDivElement>) {
     const target = evt.target as Node;
     evt.stopPropagation();
     if (
@@ -586,7 +587,7 @@ const Modal = React.forwardRef(function Modal(
       {...rest}
       level={0}
       onKeyDown={handleKeyDown}
-      onMouseDown={handleMousedown}
+      onClick={composeEventHandlers([rest?.onClick, handleOnClick])}
       onBlur={!focusTrapWithoutSentinels ? handleBlur : () => {}}
       className={modalClasses}
       role="presentation"