From 7ed91922eec9cc1bd2152671c1bdfe533c062d5a Mon Sep 17 00:00:00 2001
From: wanxiankai <xiankai.wan@gmail.com>
Date: Mon, 20 Jul 2026 18:11:32 +0800
Subject: [PATCH] fix: handle overlay clicks after stopped propagation

---
 specs/Modal.events.spec.js    | 31 +++++++++++++++++++++++++++++++
 src/components/ModalPortal.js |  8 ++++++++
 2 files changed, 39 insertions(+)

diff --git a/specs/Modal.events.spec.js b/specs/Modal.events.spec.js
index 8c9d5f2b..c45b1d86 100644
--- a/specs/Modal.events.spec.js
+++ b/specs/Modal.events.spec.js
@@ -239,6 +239,37 @@ export default () => {
         requestCloseCallback.called.should.not.be.ok();
       });
     });
+
+    it("closes on first overlay click after content click stops propagation", () => {
+      const requestCloseCallback = sinon.spy();
+      let innerButton = null;
+      const setInnerButton = ref => {
+        innerButton = ref;
+      };
+      const stopPropagation = event => event.stopPropagation();
+
+      const props = {
+        isOpen: true,
+        shouldCloseOnOverlayClick: true,
+        onRequestClose: requestCloseCallback
+      };
+
+      withModal(
+        props,
+        <button ref={setInnerButton} onClick={stopPropagation} />,
+        modal => {
+          mouseDownAt(innerButton);
+          mouseUpAt(innerButton);
+          clickAt(innerButton);
+
+          mouseDownAt(moverlay(modal));
+          mouseUpAt(moverlay(modal));
+          clickAt(moverlay(modal));
+
+          requestCloseCallback.calledOnce.should.be.ok();
+        }
+      );
+    });
   });
 
   it("should not stop event propagation", () => {
diff --git a/src/components/ModalPortal.js b/src/components/ModalPortal.js
index 7f20df67..1e44ce53 100644
--- a/src/components/ModalPortal.js
+++ b/src/components/ModalPortal.js
@@ -90,6 +90,7 @@ export default class ModalPortal extends Component {
 
     this.shouldClose = null;
     this.moveFromContentToOverlay = null;
+    this.preventOverlayMouseDown = false;
   }
 
   componentDidMount() {
@@ -322,6 +323,12 @@ export default class ModalPortal extends Component {
     if (!this.props.shouldCloseOnOverlayClick && event.target == this.overlay) {
       event.preventDefault();
     }
+
+    if (this.preventOverlayMouseDown) {
+      this.preventOverlayMouseDown = false;
+    } else if (event.target == this.overlay) {
+      this.shouldClose = null;
+    }
   };
 
   handleContentOnClick = () => {
@@ -330,6 +337,7 @@ export default class ModalPortal extends Component {
 
   handleContentOnMouseDown = () => {
     this.shouldClose = false;
+    this.preventOverlayMouseDown = true;
   };
 
   requestClose = event =>