From 0e0186fdbbab44c86d4c960e160f7f6153821b06 Mon Sep 17 00:00:00 2001
From: Anton <vakabunga@proton.me>
Date: Wed, 15 Apr 2026 17:02:15 +0300
Subject: [PATCH] fix: close modal popups only on overlay mousedown

---
 README.md                                      | 18 ++++++++++--------
 frontend/src/components/ClearHistoryModal.tsx  |  7 ++++++-
 frontend/src/components/DeleteImportModal.tsx  |  7 ++++++-
 .../src/components/EditTransactionModal.tsx    |  7 ++++++-
 frontend/src/components/ImportModal.tsx        |  7 ++++++-
 5 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 2366854..60c47b1 100644
--- a/README.md
+++ b/README.md
@@ -15,13 +15,15 @@ family_budget/
 
 ## Tech stack
 
-| Layer      | Choice                 | Rationale                                              |
-|----------  |------------------------|--------------------------------------------------------|
-| Backend    | Express + TypeScript   | Simple, well-known, sufficient for a small local app   |
-| Frontend   | React + Vite + TS      | Fast dev experience, modern tooling                    |
-| Database   | PostgreSQL             | Deployed on Synology NAS                               |
-| Migrations | Knex                   | Lightweight, SQL-close, supports seeds                 |
-| Shared     | Pure TypeScript types  | Zero-runtime, imported by both backend and frontend    |
+
+| Layer      | Choice                | Rationale                                            |
+| ---------- | --------------------- | ---------------------------------------------------- |
+| Backend    | Express + TypeScript  | Simple, well-known, sufficient for a small local app |
+| Frontend   | React + Vite + TS     | Fast dev experience, modern tooling                  |
+| Database   | PostgreSQL            | Deployed on Synology NAS                             |
+| Migrations | Knex                  | Lightweight, SQL-close, supports seeds               |
+| Shared     | Pure TypeScript types | Zero-runtime, imported by both backend and frontend  |
+
 
 ## Prerequisites
 
@@ -39,4 +41,4 @@ npm install
 npm run build -w shared
 ```
 
-See `backend/README.md` and `frontend/README.md` for per-package instructions.
+See `backend/README.md` and `frontend/README.md` for per-package instructions.
\ No newline at end of file
diff --git a/frontend/src/components/ClearHistoryModal.tsx b/frontend/src/components/ClearHistoryModal.tsx
index 19ef61e..39512f2 100644
--- a/frontend/src/components/ClearHistoryModal.tsx
+++ b/frontend/src/components/ClearHistoryModal.tsx
@@ -31,7 +31,12 @@ export function ClearHistoryModal({ onClose, onDone }: Props) {
   };
 
   return (
-    <div className="modal-overlay" onClick={onClose}>
+    <div
+      className="modal-overlay"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
       <div className="modal" onClick={(e) => e.stopPropagation()}>
         <div className="modal-header">
           <h2>Очистить историю операций</h2>
diff --git a/frontend/src/components/DeleteImportModal.tsx b/frontend/src/components/DeleteImportModal.tsx
index d03943f..ff91edf 100644
--- a/frontend/src/components/DeleteImportModal.tsx
+++ b/frontend/src/components/DeleteImportModal.tsx
@@ -31,7 +31,12 @@ export function DeleteImportModal({ imp, onClose, onDone }: Props) {
   };
 
   return (
-    <div className="modal-overlay" onClick={onClose}>
+    <div
+      className="modal-overlay"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
       <div className="modal" onClick={(e) => e.stopPropagation()}>
         <div className="modal-header">
           <h2>Удалить импорт</h2>
diff --git a/frontend/src/components/EditTransactionModal.tsx b/frontend/src/components/EditTransactionModal.tsx
index 0f903ab..5ff8c38 100644
--- a/frontend/src/components/EditTransactionModal.tsx
+++ b/frontend/src/components/EditTransactionModal.tsx
@@ -82,7 +82,12 @@ export function EditTransactionModal({
   };
 
   return (
-    <div className="modal-overlay" onClick={onClose}>
+    <div
+      className="modal-overlay"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
       <div className="modal" onClick={(e) => e.stopPropagation()}>
         <div className="modal-header">
           <h2>Редактирование операции</h2>
diff --git a/frontend/src/components/ImportModal.tsx b/frontend/src/components/ImportModal.tsx
index 107ffda..4af55b9 100644
--- a/frontend/src/components/ImportModal.tsx
+++ b/frontend/src/components/ImportModal.tsx
@@ -59,7 +59,12 @@ export function ImportModal({ onClose, onDone }: Props) {
   };
 
   return (
-    <div className="modal-overlay" onClick={onClose}>
+    <div
+      className="modal-overlay"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
       <div className="modal" onClick={(e) => e.stopPropagation()}>
         <div className="modal-header">
           <h2>Импорт выписки</h2>