Fix: Modal-Formulare nach Abbrechen nicht mehr mit alten Daten vorbefuellt

Die Modals in der Kundenakte (Bankkarte, Adresse, Ausweis, Zaehler,
Zaehlerstand) bleiben dauerhaft gemountet und wurden nur ueber isOpen
umgeschaltet. Der Reset-Effekt haengte an <entity>?.id - bei Neuanlage
immer undefined, also kein Reset beim erneuten Oeffnen: nach "Abbrechen"
standen die vorher getippten Daten noch drin.

Jetzt Reset beim Oeffnen (Guard if(!isOpen), Deps [isOpen, <entity>?.id]),
weiterhin kein Reset bei jedem Tastendruck. Ausserdem den fehlerhaften
useState(()=>{})-Init-Missbrauch im Bankkarten-Modal entfernt.
StressfreiEmail-/AdditionalForwards-Modal waren bereits korrekt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-08-12 14:31:03 +02:00
co-authored by Claude Opus 4.8
parent a28c8355fd
commit d0619141bb
+30 -20
View File
@@ -2508,12 +2508,14 @@ function AddressModal({
const isPending = createMutation.isPending || updateMutation.isPending; const isPending = createMutation.isPending || updateMutation.isPending;
// Beim Öffnen / Wechsel zwischen Adressen aus den Props re-initialisieren. // Beim Öffnen / Wechsel zwischen Adressen aus den Props re-initialisieren.
// Vorher als unbedingte if-setState im Render-Body → Reset bei jedem // Guard `if (!isOpen)`: Modal bleibt dauerhaft gemountet ohne Reset beim
// Tastendruck, Straße ließ sich nicht eintippen. // Öffnen blieben nach „Abbrechen" die vorher getippten Daten stehen.
// Deps nur isOpen + Adress-ID → kein Reset bei jedem Tastendruck.
useEffect(() => { useEffect(() => {
if (!isOpen) return;
setFormData(getInitialFormData()); setFormData(getInitialFormData());
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [address?.id]); }, [isOpen, address?.id]);
return ( return (
<Modal isOpen={isOpen} onClose={onClose} title={isEditing ? 'Adresse bearbeiten' : 'Adresse hinzufügen'}> <Modal isOpen={isOpen} onClose={onClose} title={isEditing ? 'Adresse bearbeiten' : 'Adresse hinzufügen'}>
@@ -2695,11 +2697,6 @@ function BankCardModal({
const [ibanLookupLoading, setIbanLookupLoading] = useState(false); const [ibanLookupLoading, setIbanLookupLoading] = useState(false);
const [showIbanRequired, setShowIbanRequired] = useState(false); const [showIbanRequired, setShowIbanRequired] = useState(false);
// Reset form when bankCard changes
useState(() => {
setFormData(getInitialFormData());
});
// BIC + Bankname aus der IBAN ableiten (offline über Bundesbank-BLZ im // BIC + Bankname aus der IBAN ableiten (offline über Bundesbank-BLZ im
// Backend). Ist das IBAN-Feld leer, kommt eine OK-Messagebox statt einer // Backend). Ist das IBAN-Feld leer, kommt eine OK-Messagebox statt einer
// Anfrage. Gleichzeitig prüft der Server die IBAN-Prüfziffer (Tippfehler). // Anfrage. Gleichzeitig prüft der Server die IBAN-Prüfziffer (Tippfehler).
@@ -2772,12 +2769,19 @@ function BankCardModal({
const isPending = createMutation.isPending || updateMutation.isPending; const isPending = createMutation.isPending || updateMutation.isPending;
// Re-Init nur beim Wechsel zur anderen Karte nicht bei jedem // Formular zurücksetzen, sobald die Modal geöffnet wird (Neuanlage: leer,
// Tastendruck (das löste vorher Reset auf DB-Wert aus). // Bearbeiten: Kartendaten). Nötig, weil beide Modal-Instanzen dauerhaft
// gemountet bleiben und nur per isOpen umgeschaltet werden ohne diesen
// Reset blieben nach „Abbrechen" die vorher getippten Daten stehen.
// Läuft NICHT bei jedem Tastendruck (Deps nur isOpen + Karten-ID), sonst
// würde jede Eingabe wieder auf den DB-Wert zurückspringen.
useEffect(() => { useEffect(() => {
if (!isOpen) return;
setFormData(getInitialFormData()); setFormData(getInitialFormData());
setIbanLookupLoading(false);
setShowIbanRequired(false);
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [bankCard?.id]); }, [isOpen, bankCard?.id]);
return ( return (
<> <>
@@ -2968,12 +2972,14 @@ function DocumentModal({
const isPending = createMutation.isPending || updateMutation.isPending; const isPending = createMutation.isPending || updateMutation.isPending;
// Re-Init nur beim Wechsel zum anderen Ausweis nicht bei jedem // Reset beim Öffnen (Guard `if (!isOpen)`): Modal bleibt gemountet, sonst
// Tastendruck (das löste vorher Reset auf DB-Wert aus). // blieben nach „Abbrechen" die vorher getippten Daten stehen. Deps nur
// isOpen + Ausweis-ID → kein Reset bei jedem Tastendruck.
useEffect(() => { useEffect(() => {
if (!isOpen) return;
setFormData(getInitialFormData()); setFormData(getInitialFormData());
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [document?.id]); }, [isOpen, document?.id]);
return ( return (
<Modal isOpen={isOpen} onClose={onClose} title={isEditing ? 'Ausweis bearbeiten' : 'Ausweis hinzufügen'}> <Modal isOpen={isOpen} onClose={onClose} title={isEditing ? 'Ausweis bearbeiten' : 'Ausweis hinzufügen'}>
@@ -3180,12 +3186,14 @@ function MeterModal({
const isPending = createMutation.isPending || updateMutation.isPending; const isPending = createMutation.isPending || updateMutation.isPending;
// Re-Init nur beim Wechsel zum anderen Zähler nicht bei jedem // Reset beim Öffnen (Guard `if (!isOpen)`): Modal bleibt gemountet, sonst
// Tastendruck (das löste vorher Reset auf DB-Wert aus). // blieben nach „Abbrechen" die vorher getippten Daten stehen. Deps nur
// isOpen + Zähler-ID → kein Reset bei jedem Tastendruck.
useEffect(() => { useEffect(() => {
if (!isOpen) return;
setFormData(getInitialFormData()); setFormData(getInitialFormData());
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [meter?.id]); }, [isOpen, meter?.id]);
const noDeliveryAddresses = deliveryAddresses.length === 0; const noDeliveryAddresses = deliveryAddresses.length === 0;
const successorLocked = !isEditing && formData.isSuccessor && !!predecessor; const successorLocked = !isEditing && formData.isSuccessor && !!predecessor;
@@ -3419,12 +3427,14 @@ function MeterReadingModal({
const isPending = createMutation.isPending || updateMutation.isPending; const isPending = createMutation.isPending || updateMutation.isPending;
// Re-Init nur beim Wechsel zum anderen Zählerstand nicht bei // Reset beim Öffnen (Guard `if (!isOpen)`): Modal bleibt gemountet, sonst
// jedem Tastendruck (das löste vorher Reset auf DB-Wert aus). // blieben nach „Abbrechen" die vorher getippten Daten stehen. Deps nur
// isOpen + Zählerstand-ID → kein Reset bei jedem Tastendruck.
useEffect(() => { useEffect(() => {
if (!isOpen) return;
setFormData(getInitialFormData()); setFormData(getInitialFormData());
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [reading?.id]); }, [isOpen, reading?.id]);
return ( return (
<Modal isOpen={isOpen} onClose={onClose} title={isEditing ? 'Zählerstand bearbeiten' : 'Zählerstand erfassen'}> <Modal isOpen={isOpen} onClose={onClose} title={isEditing ? 'Zählerstand bearbeiten' : 'Zählerstand erfassen'}>