Modal: Ensure drag from within Modal does not accidentally dismiss it

packages/sage-react/lib/Modal/Modal.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { ModalBody } from './ModalBody';
@@ -24,6 +24,7 @@ export const Modal = ({
   size,
   ...rest
 }) => {
+  const [mouseDownSrc, setMouseDownSrc] = useState(null);
   const classNames = classnames(
     'sage-modal',
     className,
@@ -56,10 +57,14 @@ export const Modal = ({
     }
   }
 
-  const handleBackgroundClick = (evt) => {
-    if (evt.target === evt.currentTarget) {
+  const handleMouseDown = (evt) => setMouseDownSrc(evt.target);
+
+  const handleMouseUp = (evt) => {
+    if (evt.target === evt.currentTarget && evt.target === mouseDownSrc) {
       onExit(true);
     }
+
+    setMouseDownSrc(null);
   };
 
   const handleBackgroundKeypress = () => {
@@ -70,7 +75,8 @@ export const Modal = ({
   const attrs = {};
 
   if (!disableBackgroundDismiss) {
-    attrs.onClick = handleBackgroundClick;
+    attrs.onMouseDown = handleMouseDown;
+    attrs.onMouseUp = handleMouseUp;
     attrs.onKeyPress = handleBackgroundKeypress;
     attrs.role = 'button';
     attrs.tabIndex = '0';

packages/sage-react/lib/Modal/Modal.story.jsx

@@ -199,10 +199,10 @@ export const Wired = (args) => {
         Take An Action
       </Button>
       <Modal
+        {...args}
         active={active}
         animation={{ direction: Modal.ANIMATION_DIRECTIONS.BOTTOM }}
         onExit={onExit}
-        {...args}
       >
         <DefaultBody onExit={onExit} />
       </Modal>

packages/sage-system/lib/modal.js

@@ -20,6 +20,7 @@ Sage.modal = (function() {
   const EVENT_OPEN = "sage.modal.open";
   let selectorLastFocused;
   let containerInitialContent;
+  let mouseDownSrc;
 
   // ==================================================
   // Functions
@@ -29,21 +30,29 @@ Sage.modal = (function() {
     // If a modal has 'data-js-modal-disable-close' return early and don't init any handlers
     if (el.hasAttribute(SELECTOR_MODAL_DISABLE_CLOSE)) return;
 
-    el.addEventListener("click", function(evt) {
-      let el = evt.target;
+    // In order to prevent accidentally closing modals
+    // after dragging within the modal to the outside
+    // we store the target of a mousedown
+    el.addEventListener("mousedown", (evt) => mouseDownSrc = evt.target);
 
+    el.addEventListener("mouseup", (evt) => {
+      let el = evt.target;
+
       // A JS Event is dispatched to call closeModal,
       // this allows Products to hook into that call
       // and perform cleanup actions like removing the modal's content.
-
-      // Modal Container has been clicked
-      if (el.hasAttribute(SELECTOR_MODAL)) {
+      
+      // Modal Container has been clicked and its not a drag event from within the modal
+      if (el.hasAttribute(SELECTOR_MODAL) && el === mouseDownSrc) {
         dispatchCloseAll();
-
-      // Modal Close Button has been clicked
+        
+        // Modal Close Button has been clicked
       } else if (el.hasAttribute(SELECTOR_MODAL_CLOSE) || evt.target.parentElement.hasAttribute(SELECTOR_MODAL_CLOSE)) {
         dispatchCloseAll();
       }
+
+      // Clear out the mouseDownSrc
+      mouseDownSrc = null;
     });
   }