fix(reminders): Cursor springt beim Schreiben nicht mehr in den Titel
Der Fokus auf das Titelfeld lag im selben Effekt wie der Escape-Listener mit Abhaengigkeit onClose. Die Kachel uebergibt onClose inline und zeichnet alle 10 s neu (NOW_TICK_MS) - der Effekt lief jedes Mal erneut und holte den Cursor aus der Beschreibung zurueck in den Titel. Fokus jetzt nur beim Oeffnen, Escape ueber eine Ref. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -65,14 +65,23 @@ export function ReminderFormModal({
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const titleRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Fokus nur EINMAL beim Oeffnen (quick-261001-g68): `onClose` kommt aus der
|
||||
// Kachel als neue Funktion bei jedem Neuzeichnen — die Kachel zeichnet alle
|
||||
// 10 s neu (NOW_TICK_MS). Hing der Fokus mit am `onClose`-Effekt, sprang der
|
||||
// Cursor beim Schreiben der Beschreibung immer wieder in den Titel.
|
||||
useEffect(() => {
|
||||
titleRef.current?.focus();
|
||||
}, []);
|
||||
|
||||
const onCloseRef = useRef(onClose);
|
||||
onCloseRef.current = onClose;
|
||||
useEffect(() => {
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose();
|
||||
if (e.key === 'Escape') onCloseRef.current();
|
||||
};
|
||||
document.addEventListener('keydown', onKey);
|
||||
return () => document.removeEventListener('keydown', onKey);
|
||||
}, [onClose]);
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
@@ -349,6 +349,32 @@ describe('ReminderWidget — Faelligkeit ohne Neuladen', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('ReminderWidget — Formular behaelt den Fokus (quick-261001-g68)', () => {
|
||||
afterEach(() => {
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
it('der 10-s-Takt der Kachel holt den Cursor nicht aus der Beschreibung zurueck in den Titel', async () => {
|
||||
vi.useFakeTimers();
|
||||
vi.setSystemTime(new Date('2026-09-29T12:00:00.000Z'));
|
||||
mockList.mockResolvedValue([]);
|
||||
render(<ReminderWidget {...props} />);
|
||||
await act(async () => {
|
||||
await vi.advanceTimersByTimeAsync(0);
|
||||
});
|
||||
fireEvent.click(screen.getByText('reminder.add'));
|
||||
expect(document.activeElement).toBe(screen.getByLabelText('reminder.titleLabel'));
|
||||
|
||||
const description = screen.getByLabelText('reminder.descriptionLabel');
|
||||
description.focus();
|
||||
fireEvent.change(description, { target: { value: 'Unterlagen mitnehmen' } });
|
||||
await act(async () => {
|
||||
await vi.advanceTimersByTimeAsync(30_000);
|
||||
});
|
||||
expect(document.activeElement).toBe(description);
|
||||
});
|
||||
});
|
||||
|
||||
describe('ReminderWidget — Spaeter erinnern kurz nach Mitternacht', () => {
|
||||
afterEach(() => {
|
||||
vi.useRealTimers();
|
||||
|
||||
Reference in New Issue
Block a user