fix(Modal): prevent closing if mouseup was outside (#4865)

* fix(Modal): prevent closing if mouseup event was outside - fix: #3373 - fix: #2666
react-bootstrap · Nov 27, 2019 · 87a9a97 · 87a9a97
1 parent 4279d6b
commit 87a9a97
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/src/Modal.js b/src/Modal.js
@@ -178,7 +178,8 @@ class Modal extends React.Component {
   }
 
   handleDialogClick(e) {
-    if (e.target !== e.currentTarget) {
+    if (this._ignoreBackdropClick || e.target !== e.currentTarget) {
+      this._ignoreBackdropClick = false;
       return;
     }
 
@@ -229,6 +230,18 @@ class Modal extends React.Component {
     });
   }
 
+  handleDialogBackdropMouseDown = () => {
+    this._waitingForMouseUp = true;
+  };
+
+  handleMouseUp = ev => {
+    const dialogNode = this._modal.getDialogElement();
+    if (this._waitingForMouseUp && ev.target === dialogNode) {
+      this._ignoreBackdropClick = true;
+    }
+    this._waitingForMouseUp = false;
+  };
+
   render() {
     const {
       backdrop,
@@ -264,12 +277,14 @@ class Modal extends React.Component {
         )}
         onEntering={createChainedFunction(onEntering, this.handleEntering)}
         onExited={createChainedFunction(onExited, this.handleExited)}
+        onMouseUp={this.handleMouseUp}
       >
         <Dialog
           {...dialogProps}
           style={{ ...this.state.style, ...style }}
           className={classNames(className, inClassName)}
           onClick={backdrop === true ? this.handleDialogClick : null}
+          onMouseDownDialog={this.handleDialogBackdropMouseDown}
         >
           {children}
         </Dialog>

diff --git a/src/ModalDialog.js b/src/ModalDialog.js
@@ -25,6 +25,7 @@ class ModalDialog extends React.Component {
       className,
       style,
       children,
+      onMouseDownDialog,
       ...props
     } = this.props;
     const [bsProps, elementProps] = splitBsProps(props);
@@ -47,7 +48,12 @@ class ModalDialog extends React.Component {
         style={modalStyle}
         className={classNames(className, bsClassName)}
       >
-        <div className={classNames(dialogClassName, dialogClasses)}>
+        {
+          // eslint-disable-next-line jsx-a11y/no-static-element-interactions, prettier/prettier
+        }<div
+          className={classNames(dialogClassName, dialogClasses)}
+          onMouseDown={onMouseDownDialog}
+        >
           <div className={prefix(bsProps, 'content')} role="document">
             {children}
           </div>