From b12ac2e1e7eefce31f97062f5cc0c4a1579012e7 Mon Sep 17 00:00:00 2001
From: David Menendez <damenend@gmail.com>
Date: Tue, 16 Jul 2024 08:40:17 -0500
Subject: [PATCH] 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>
---
 .../ComposedModal/ComposedModal-test.js          | 16 ++++++++++++++++
 .../components/ComposedModal/ComposedModal.tsx   |  5 +++--
 .../react/src/components/Modal/Modal-test.js     | 16 ++++++++++++++++
 packages/react/src/components/Modal/Modal.tsx    |  5 +++--
 4 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/ComposedModal/ComposedModal-test.js b/packages/react/src/components/ComposedModal/ComposedModal-test.js
index 3db0bff2a4b9..ec93a9137786 100644
--- 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
index e2392067bb60..a624067e627a 100644
--- 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
index 7e0f65d859c1..a713fc1dd768 100644
--- 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
index 088a31dcb571..f635a7993570 100644
--- 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"