fix: Dropdown bleibt beim Scrollen offen, Dialog beim Markieren

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>
This commit is contained in:
Guido
2026-08-21 20:31:18 +02:00
co-authored by Claude Opus 5
parent d8c15ca260
commit ff897c196b
2 changed files with 19 additions and 2 deletions
+12 -1
View File
@@ -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">