From 355c73512df7142166c4e9e479ada4ef9b4e59e5 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Sat, 31 May 2025 08:53:20 +0800
Subject: [PATCH] Enhance modal close behavior by tracking mouse events on the
 background. Implement logic to close modals only if mouseup occurs on the
 background after mousedown, improving user experience.

---
 static/js/managers/ModalManager.js | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/static/js/managers/ModalManager.js b/static/js/managers/ModalManager.js
index 4ab8cd2c..edca53f5 100644
--- a/static/js/managers/ModalManager.js
+++ b/static/js/managers/ModalManager.js
@@ -3,6 +3,7 @@ export class ModalManager {
         this.modals = new Map();
         this.scrollPosition = 0;
         this.currentOpenModal = null; // Track currently open modal
+        this.mouseDownOnBackground = false; // Track if mousedown happened on modal background
     }
 
     initialize() {
@@ -201,10 +202,27 @@ export class ModalManager {
 
         // Add click outside handler if specified in config
         if (config.closeOnOutsideClick) {
-            config.element.addEventListener('click', (e) => {
+            // Track mousedown on modal background
+            config.element.addEventListener('mousedown', (e) => {
                 if (e.target === config.element) {
+                    this.mouseDownOnBackground = true;
+                } else {
+                    this.mouseDownOnBackground = false;
+                }
+            });
+            
+            // Only close if mouseup is also on the background
+            config.element.addEventListener('mouseup', (e) => {
+                if (e.target === config.element && this.mouseDownOnBackground) {
                     this.closeModal(id);
                 }
+                // Reset flag regardless of target
+                this.mouseDownOnBackground = false;
+            });
+            
+            // Cancel the flag if mouse leaves the document entirely
+            document.addEventListener('mouseleave', () => {
+                this.mouseDownOnBackground = false;
             });
         }
     }