diff --git a/rippy-windows/src/fenster/App.tsx b/rippy-windows/src/fenster/App.tsx index 71db938..08f8742 100644 --- a/rippy-windows/src/fenster/App.tsx +++ b/rippy-windows/src/fenster/App.tsx @@ -7,7 +7,7 @@ // Erst-Einrichtung, Dialoge). Die Regeln bleiben: EINE Einstellungs-Quelle // über den Kern (§ 6.7), R2 (nichts verschwindet ohne Auskunft), R4 // (Fehler stehen im Fenster — bei Systemfehlern als rote Karte). -import { useEffect, useState } from 'react' +import { useEffect, useRef, useState } from 'react' import type { DiscInfoStand, DiscTitelVorschlag, @@ -272,6 +272,35 @@ function SegmentBalken({ prozent }: { prozent: number }) { } // § 5 Schritt 4: „nein → fragen" — Suche + Auswahl der richtigen Metadaten. + +/** Nur ein Klick, der WIRKLICH auf der Hintergrundfläche begann, schließt + * einen Dialog. + * + * Commander-Fund (01.09.2026): „es gibt einen kleinen bug im UI wenn man + * selbst den titel sucht das suchfenster schließt sich dann einfach." + * Der Grund ist eine bekannte Falle: Wer im Eingabefeld Text markiert und + * dabei über den Dialogrand hinauszieht, drückt INNEN und lässt AUSSEN + * los. Der Browser meldet als Ziel des Klicks dann den gemeinsamen + * Vorfahren — die Hintergrundfläche. Ein reiner onClick-Horcher darauf + * schließt den Dialog also mitten im Tippen. + * + * Deshalb wird der Anfang gemerkt: Nur wenn Drücken UND Loslassen auf der + * Fläche selbst passierten, ist es ein Klick daneben. */ +function useHintergrundKlick(schliessen: () => void): { + onMouseDown: (e: React.MouseEvent) => void + onClick: (e: React.MouseEvent) => void +} { + const begannDraussen = useRef(false) + return { + onMouseDown: (e) => { + begannDraussen.current = e.target === e.currentTarget + }, + onClick: (e) => { + if (begannDraussen.current && e.target === e.currentTarget) schliessen() + }, + } +} + function AendernDialog({ id, startText, @@ -284,6 +313,7 @@ function AendernDialog({ schliessen: () => void }) { const [text, setText] = useState(startText) + const hintergrund = useHintergrundKlick(schliessen) useEffect(() => { metadatenSuchen(id, startText) // Nur beim Öffnen — weitere Suchen löst der Knopf aus. @@ -292,7 +322,7 @@ function AendernDialog({ return (