From ff897c196b2ec0bed22dc63c73650f39acba8e02 Mon Sep 17 00:00:00 2001
From: Guido <guido.schmit03@gmail.com>
Date: Fri, 21 Aug 2026 20:31:18 +0200
Subject: [PATCH] fix: Dropdown bleibt beim Scrollen offen, Dialog beim
 Markieren
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Zwei Klick-Aergernisse mit derselben Ursache – ein zu grob gefasster
Schliess-Ausloeser.

Die Kategorieliste schloss bei jedem Scroll-Ereignis, wegen capture=true
auch beim Scrollen IN der Liste. Genau das will man aber tun. Jetzt zaehlt
nur noch Scrollen ausserhalb.

Der Dialog schloss, sobald ein Klick auf dem Hintergrund endete. Markiert
man Text in einem Feld und zieht ueber den Rand hinaus, liegt das Mouseup
dort – der Dialog ging mitten im Markieren zu. Jetzt muss der Klick auch
auf dem Hintergrund begonnen haben.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/src/components/CategorySelect.jsx |  8 +++++++-
 web/src/components/Modal.jsx          | 13 ++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/web/src/components/CategorySelect.jsx b/web/src/components/CategorySelect.jsx
index 470f59b..425c3ec 100644
--- a/web/src/components/CategorySelect.jsx
+++ b/web/src/components/CategorySelect.jsx
@@ -75,7 +75,13 @@ export default function CategorySelect({
       setOpen(false);
     };
     const onKey = (e) => e.key === "Escape" && setOpen(false);
-    const onScrollResize = () => setOpen(false);
+    // Beim Scrollen der Seite wandert die Liste weg vom Knopf, deshalb zu.
+    // Scrollen INNERHALB der Liste ist aber genau das, was man tun will –
+    // capture=true fing das bisher mit ab und schloss sie sofort wieder.
+    const onScrollResize = (e) => {
+      if (e?.target && panelRef.current?.contains(e.target)) return;
+      setOpen(false);
+    };
     document.addEventListener("mousedown", onDown);
     document.addEventListener("keydown", onKey);
     // capture=true: fängt auch das Scrollen innerhalb der Tabelle ab.
diff --git a/web/src/components/Modal.jsx b/web/src/components/Modal.jsx
index 3e62d6d..fe21e47 100644
--- a/web/src/components/Modal.jsx
+++ b/web/src/components/Modal.jsx
@@ -1,11 +1,22 @@
+import { useRef } from "react";
+
 import Icon from "./Icon";
 
 // Einfacher, gestalteter Dialog (nutzt die modal-Klassen der Vorlage).
 export default function Modal({ title, onClose, children, footer, wide = false }) {
+  // Nur schliessen, wenn der Klick auch AUF dem Hintergrund begonnen hat.
+  // Markiert man Text in einem Feld und zieht dabei über den Rand hinaus,
+  // liegt das Mouseup auf dem Hintergrund; der Klick feuert dann auf dem
+  // gemeinsamen Elternelement und schloss den Dialog mitten im Markieren.
+  const startAussen = useRef(false);
   return (
     <div
       className="modal-backdrop"
-      onClick={(e) => e.target === e.currentTarget && onClose()}
+      onMouseDown={(e) => { startAussen.current = e.target === e.currentTarget; }}
+      onClick={(e) => {
+        if (e.target === e.currentTarget && startAussen.current) onClose();
+        startAussen.current = false;
+      }}
     >
       <div className="modal" role="dialog" aria-modal="true" style={{ maxWidth: wide ? 640 : 480 }}>
         <div className="modal-head">