Fix modal closing when selection ended outside of the modal (#645)

The modal would close when the user selected something outside the modal
and ended the selection outside of the modal.

Author: atmelmicro

src/components/Modal/Modal.jsx

@@ -61,6 +61,7 @@ export const Modal = ({
   ...restProps
 }) => {
   const internalDialogRef = useRef();
+  const mouseDownTarget = useRef(null);
 
   useEffect(() => {
     internalDialogRef.current.showModal();
@@ -79,7 +80,13 @@ export const Modal = ({
     [closeButtonRef, restProps.onCancel],
   );
   const onClick = useCallback(
-    (e) => dialogOnClickHandler(e, closeButtonRef, internalDialogRef, allowCloseOnBackdropClick),
+    (e) => dialogOnClickHandler(
+      e,
+      closeButtonRef,
+      internalDialogRef,
+      allowCloseOnBackdropClick,
+      mouseDownTarget.current,
+    ),
     [allowCloseOnBackdropClick, closeButtonRef, internalDialogRef],
   );
   const onClose = useCallback(
@@ -101,11 +108,17 @@ export const Modal = ({
       primaryButtonRef,
     ],
   );
+
+  const onMouseDown = useCallback((e) => {
+    mouseDownTarget.current = e.target;
+  }, []);
+
   const events = {
     onCancel,
     onClick,
     onClose,
     onKeyDown,
+    onMouseDown,
   };
 
   if (portalId === null) {

src/components/Modal/_helpers/dialogOnClickHandler.js

@@ -17,12 +17,18 @@ export const dialogOnClickHandler = (
   closeButtonRef,
   dialogRef,
   allowCloseOnBackdropClick,
+  mouseDownTarget,
 ) => {
   // If it is not allowed to close modal on backdrop click, do nothing.
   if (!allowCloseOnBackdropClick) {
     return;
   }
 
+  // If the click started on the inside of the dialog, do nothing.
+  if (e.target !== mouseDownTarget) {
+    return;
+  }
+
   // Detection of the click on the backdrop is based on the following conditions:
   // 1. The click target is the dialog itself. This prevents detection of clicks on the dialog's children.
   // 2. The click is outside the dialog's boundaries.