From a16949b788bba186c1049722a30453eb16e23518 Mon Sep 17 00:00:00 2001
From: Zain Gulbaz <zaingulbaz8@gmail.com>
Date: Sat, 27 Aug 2022 18:01:04 +0500
Subject: [PATCH 1/3] [Added] Modal Close on right click at overlay

---
 README.md                     |  1 +
 docs/index.md                 |  6 ++++++
 examples/bootstrap/app.js     |  1 +
 src/components/Modal.js       |  1 +
 src/components/ModalPortal.js | 13 ++++++++++++-
 5 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 16e59399..7d85f29a 100644
--- a/README.md
+++ b/README.md
@@ -93,6 +93,7 @@ function App() {
         isOpen={modalIsOpen}
         onAfterOpen={afterOpenModal}
         onRequestClose={closeModal}
+        onOverlayRightClick={closeModal}
         style={customStyles}
         contentLabel="Example Modal"
       >
diff --git a/docs/index.md b/docs/index.md
index 4e8a296e..7b40e2e3 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -52,6 +52,12 @@ import ReactModal from 'react-modal';
   /* Function that will be run when the modal is requested
      to be closed (either by clicking on overlay or pressing ESC).
      Note: It is not called if isOpen is changed by other means. */}
+     
+  onOverlayRightClick={
+    handleRequestCloseFunc
+    /* Function that will be run when the modal is requested
+     to be closed (either by right clicking on overlay or pressing ESC).
+     Note: It is not called if isOpen is changed by other means. */}
 
   closeTimeoutMS={
     0
diff --git a/examples/bootstrap/app.js b/examples/bootstrap/app.js
index e9ba71c0..c59bb819 100644
--- a/examples/bootstrap/app.js
+++ b/examples/bootstrap/app.js
@@ -39,6 +39,7 @@ class App extends Component {
           closeTimeoutMS={150}
           isOpen={this.state.modalIsOpen}
           onRequestClose={this.handleModalCloseRequest}
+          onOverlayRightClick={this.handleModalCloseRequest}
         >
           <div className="modal-content">
             <div className="modal-header">
diff --git a/src/components/Modal.js b/src/components/Modal.js
index c064b213..b74aa97f 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -66,6 +66,7 @@ class Modal extends Component {
     ]),
     onAfterOpen: PropTypes.func,
     onRequestClose: PropTypes.func,
+    onOverlayRightClick: PropTypes.func,
     closeTimeoutMS: PropTypes.number,
     ariaHideApp: PropTypes.bool,
     shouldFocusAfterRender: PropTypes.bool,
diff --git a/src/components/ModalPortal.js b/src/components/ModalPortal.js
index 35e9837e..bbc440ed 100644
--- a/src/components/ModalPortal.js
+++ b/src/components/ModalPortal.js
@@ -55,6 +55,7 @@ export default class ModalPortal extends Component {
     onAfterOpen: PropTypes.func,
     onAfterClose: PropTypes.func,
     onRequestClose: PropTypes.func,
+    onOverlayRightClick: PropTypes.func,
     closeTimeoutMS: PropTypes.number,
     shouldFocusAfterRender: PropTypes.bool,
     shouldCloseOnOverlayClick: PropTypes.bool,
@@ -299,6 +300,15 @@ export default class ModalPortal extends Component {
     this.shouldClose = null;
   };
 
+  handleOverlayRightClick = (event) => {
+    if (this.shouldClose === null) this.shouldClose = true;
+    else if (!this.shouldClose) this.shouldClose = null;
+    if (this.shouldClose) {
+      event.preventDefault();
+      this.props.onOverlayRightClick(event);
+    }
+  };
+
   handleContentOnMouseUp = () => {
     this.shouldClose = false;
   };
@@ -375,7 +385,8 @@ export default class ModalPortal extends Component {
       className: this.buildClassName("overlay", overlayClassName),
       style: { ...overlayStyles, ...this.props.style.overlay },
       onClick: this.handleOverlayOnClick,
-      onMouseDown: this.handleOverlayOnMouseDown
+      onMouseDown: this.handleOverlayOnMouseDown,
+      onContextMenu: this.handleOverlayRightClick,
     };
 
     const contentProps = {

From 06c1c0451230f08966b63fc174160ff8a20cf4f2 Mon Sep 17 00:00:00 2001
From: Zain Gulbaz <zaingulbaz8@gmail.com>
Date: Sun, 28 Aug 2022 07:54:07 +0500
Subject: [PATCH 2/3] [Added] close modal on right click

---
 src/components/ModalPortal.js | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/ModalPortal.js b/src/components/ModalPortal.js
index bbc440ed..063b5e21 100644
--- a/src/components/ModalPortal.js
+++ b/src/components/ModalPortal.js
@@ -300,13 +300,12 @@ export default class ModalPortal extends Component {
     this.shouldClose = null;
   };
 
-  handleOverlayRightClick = (event) => {
-    if (this.shouldClose === null) this.shouldClose = true;
-    else if (!this.shouldClose) this.shouldClose = null;
-    if (this.shouldClose) {
-      event.preventDefault();
-      this.props.onOverlayRightClick(event);
-    }
+  handleOverlayRightClick = event => {    
+      if(event.target == this.overlay)
+      {
+        event.preventDefault();
+        this.props.onOverlayRightClick(event);
+      }
   };
 
   handleContentOnMouseUp = () => {

From e01ae9164f2c576b35d243311441c9fb9c88f086 Mon Sep 17 00:00:00 2001
From: Zain Gulbaz <zaingulbaz8@gmail.com>
Date: Sun, 28 Aug 2022 16:57:31 +0500
Subject: [PATCH 3/3] [Added] example test for modal close on overlay right
 click

---
 examples/basic/app.js                         |  3 +-
 .../basic/modal_close_right_click/index.js    | 50 +++++++++++++++++++
 src/components/Modal.js                       |  3 +-
 3 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 examples/basic/modal_close_right_click/index.js

diff --git a/examples/basic/app.js b/examples/basic/app.js
index 6854916d..ba3076f3 100644
--- a/examples/basic/app.js
+++ b/examples/basic/app.js
@@ -16,7 +16,8 @@ const examples = [
   Forms,
   MultipleModals,
   NestedModals,
-  ReactRouter
+  ReactRouter,
+  ModalClose
 ];
 
 class App extends Component {
diff --git a/examples/basic/modal_close_right_click/index.js b/examples/basic/modal_close_right_click/index.js
new file mode 100644
index 00000000..a580b12c
--- /dev/null
+++ b/examples/basic/modal_close_right_click/index.js
@@ -0,0 +1,50 @@
+import React, { Component } from "react";
+import Modal from "react-modal";
+
+class ModalClose extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false,
+    };
+  }
+
+  toggleModal = (event) => {
+    this.setState({ isOpen: !this.state.isOpen });
+  };
+  handleRightClick = (event) => {
+    this.setState({ isOpen: false });
+  };
+
+  render() {
+    return (
+      <div>
+        <button
+          type="button"
+          className="btn btn-primary"
+          onClick={this.toggleModal}
+        >
+          Open Modal
+        </button>
+        <Modal
+          isOpen={this.state.isOpen}
+          onOverlayRightClick={this.handleRightClick}
+        >
+          <h1>Click Right on the Overlay to close the modal</h1>
+          <button
+            type="button"
+            className="btn btn-primary"
+            onClick={this.toggleModal}
+          >
+            Close
+          </button>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default {
+  label: "Modal close on right click",
+  app: ModalClose,
+};
diff --git a/src/components/Modal.js b/src/components/Modal.js
index b74aa97f..55ad35b3 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -101,7 +101,8 @@ class Modal extends Component {
     preventScroll: false,
     parentSelector: () => document.body,
     overlayElement: (props, contentEl) => <div {...props}>{contentEl}</div>,
-    contentElement: (props, children) => <div {...props}>{children}</div>
+    contentElement: (props, children) => <div {...props}>{children}</div>,
+    onOverlayRightClick: ()=>null
   };
 
   static defaultStyles = {