Change how events are handled within Modal.jsx to reduce accidental closures

Author: SteveMicroNova

CHANGELOG.md

@@ -5,6 +5,7 @@
   * Ensure that abnormally-shaped album art is still horizontally centered
   * Add error handling on browser page for instances where the selected stream isn't browsable
   * Add scrollbars to tall modals
+  * Change how events are handled with Modals to reduce accidental closures
 * System
   * Make update process properly report errors
 

web/src/components/Modal/Modal.jsx

@@ -1,17 +1,24 @@
 import React from "react";
-
 import "./Modal.scss";
 import StopProp from "@/components/StopProp/StopProp";
-
 import PropTypes from "prop-types";
 
 const Modal = ({ children, className = "", onClose }) => {
+    const [mouseDownOutside, setMouseDownOutside] = React.useState(false);
     return (
         <div
             className={`modal_container ${className}`}
-            onClick={(e) => {
-                onClose();
-                e.stopPropagation();
+            onMouseDown={(e) => {
+                if (e.target === e.currentTarget) {
+                    setMouseDownOutside(true);
+                } else {
+                    setMouseDownOutside(false);
+                }
+            }}
+            onMouseUp={(e) => {
+                if (mouseDownOutside && e.target === e.currentTarget) {
+                    onClose();
+                }
             }}
         >
             <StopProp>{children}</StopProp>