Maximilian Stubhan
08d2740690
Deleting and correcting a history entry stopped at the present: anything not yet effective stayed put. That was not a principle, it was a missing link. A planned change lives as a payload in pending_org_changes, and nothing tied it to the history row — only a person and a date, and the data already holds an Eintritt and a Vertragsänderung sharing one. So employee_history now carries pending_id, set by change_employee_data when it schedules something. One planned change can carry two history rows: Stammdaten and Vertrag are kept apart but scheduled together. Taking one back therefore strips only that group's fields from the payload, and cancels the operation only when nothing is left. Correcting one rewrites its group and the effective date, and touches no employee data — the change has not happened yet. An entry stays on its side of the present. Pulling a planned change into today, or pushing an effective one into the future, would mean adjusting the employee record and the pending payload in opposite directions; that is what the real operations are for. Existing rows were linked where exactly one running operation matched the person and date and no other row had claimed it. All five of them matched. Anything ambiguous would have kept the old refusal, which now says the actual reason. The edit dialog surfaced a bug in useDialogFocus that predates it: the effect depended on the identity of onClose, which almost every caller rebuilds on render, so it re-ran after each keystroke and its cleanup pulled focus back to whatever opened the dialog. Any dialog with a text field would have accepted one character. It never showed because until now no dialog kept its own state next to its own onClose. Rehearsed against real data: a two-row planned change corrected, one row taken back with the operation continuing on the rest, the second taken back with the operation cancelled, and both refusals. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
91 lines
3.3 KiB
TypeScript
91 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, type RefObject } from "react";
|
|
|
|
// Everything a dialog owes the keyboard, in one place so Modal and SlideOver
|
|
// cannot drift apart. Both previously handled only Escape: focus stayed on
|
|
// whatever was behind the overlay, Tab walked straight out of the dialog into
|
|
// the page underneath, and closing left focus on <body> — so the next Tab
|
|
// started again from the top of the document.
|
|
const FOCUSABLE = [
|
|
"a[href]",
|
|
"button:not([disabled])",
|
|
"input:not([disabled]):not([type='hidden'])",
|
|
"select:not([disabled])",
|
|
"textarea:not([disabled])",
|
|
"[tabindex]:not([tabindex='-1'])",
|
|
].join(",");
|
|
|
|
function focusableWithin(container: HTMLElement): HTMLElement[] {
|
|
return [...container.querySelectorAll<HTMLElement>(FOCUSABLE)].filter(
|
|
(el) => el.offsetParent !== null || el.getClientRects().length > 0
|
|
);
|
|
}
|
|
|
|
export function useDialogFocus(open: boolean, onClose: () => void, containerRef: RefObject<HTMLElement | null>) {
|
|
const restoreToRef = useRef<HTMLElement | null>(null);
|
|
|
|
// onClose wird von den meisten Aufrufern bei jedem Rendern neu erzeugt.
|
|
// Stünde es in den Abhängigkeiten, liefe dieser Effekt nach jedem Rendern
|
|
// erneut — und sein Aufräumen holt den Fokus dorthin zurück, wo er vor dem
|
|
// Öffnen war. In einem Dialog mit Eingabefeldern hiesse das: nach dem
|
|
// ersten Zeichen springt der Fokus auf den Knopf, der ihn geöffnet hat, und
|
|
// der Rest der Eingabe geht ins Leere. Über eine Referenz bleibt der
|
|
// aktuelle Rückruf erreichbar, ohne dass der Effekt daran hängt.
|
|
const schliessen = useRef(onClose);
|
|
useEffect(() => {
|
|
schliessen.current = onClose;
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const container = containerRef.current;
|
|
restoreToRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
|
|
|
|
// First field rather than the close button: the point of opening these is
|
|
// to fill them in. autoFocus on a child wins, since it has already run.
|
|
if (container && !container.contains(document.activeElement)) {
|
|
const [first] = focusableWithin(container);
|
|
(first ?? container).focus();
|
|
}
|
|
|
|
function onKeyDown(e: KeyboardEvent) {
|
|
if (e.key === "Escape") {
|
|
schliessen.current();
|
|
return;
|
|
}
|
|
if (e.key !== "Tab" || !container) return;
|
|
|
|
const focusable = focusableWithin(container);
|
|
if (focusable.length === 0) {
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
const first = focusable[0];
|
|
const last = focusable[focusable.length - 1];
|
|
const active = document.activeElement;
|
|
|
|
// Wrap around at both ends, and pull focus back in if it somehow
|
|
// escaped (a click on the backdrop, say).
|
|
if (!container.contains(active)) {
|
|
e.preventDefault();
|
|
(e.shiftKey ? last : first).focus();
|
|
} else if (e.shiftKey && active === first) {
|
|
e.preventDefault();
|
|
last.focus();
|
|
} else if (!e.shiftKey && active === last) {
|
|
e.preventDefault();
|
|
first.focus();
|
|
}
|
|
}
|
|
|
|
window.addEventListener("keydown", onKeyDown);
|
|
return () => {
|
|
window.removeEventListener("keydown", onKeyDown);
|
|
// Back to whatever opened the dialog, so the next Tab continues from
|
|
// there instead of restarting at the top of the page.
|
|
restoreToRef.current?.focus();
|
|
};
|
|
}, [open, containerRef]);
|
|
}
|