From 7d6ac4d257ef64067a9b632099e7eae45821bffb Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Wed, 25 Feb 2026 17:01:06 +0800
Subject: [PATCH] Fix auto-lock minutes input: allow backspace to clear before
 retyping

The onChange was using parseInt(...) || 5 which snapped empty input back
to 5 immediately. Now allows empty string as intermediate state; value
is clamped to 1-60 on blur/Enter.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/settings/SettingsPage.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/settings/SettingsPage.tsx b/frontend/src/components/settings/SettingsPage.tsx
index 82c7e72..495d214 100644
--- a/frontend/src/components/settings/SettingsPage.tsx
+++ b/frontend/src/components/settings/SettingsPage.tsx
@@ -51,7 +51,7 @@ export default function SettingsPage() {
   const debounceRef = useRef<ReturnType<typeof setTimeout>>();
   const [firstDayOfWeek, setFirstDayOfWeek] = useState(settings?.first_day_of_week ?? 0);
   const [autoLockEnabled, setAutoLockEnabled] = useState(settings?.auto_lock_enabled ?? false);
-  const [autoLockMinutes, setAutoLockMinutes] = useState(settings?.auto_lock_minutes ?? 5);
+  const [autoLockMinutes, setAutoLockMinutes] = useState<number | string>(settings?.auto_lock_minutes ?? 5);
 
   // Sync state when settings load
   useEffect(() => {
@@ -61,7 +61,7 @@ export default function SettingsPage() {
       setPreferredName(settings.preferred_name ?? '');
       setFirstDayOfWeek(settings.first_day_of_week);
       setAutoLockEnabled(settings.auto_lock_enabled);
-      setAutoLockMinutes(settings.auto_lock_minutes);
+      setAutoLockMinutes(settings.auto_lock_minutes ?? 5);
     }
   }, [settings?.id]); // only re-sync on initial load (settings.id won't change)
 
@@ -195,7 +195,8 @@ export default function SettingsPage() {
   };
 
   const handleAutoLockMinutesSave = async () => {
-    const clamped = Math.max(1, Math.min(60, autoLockMinutes || 5));
+    const raw = typeof autoLockMinutes === 'string' ? parseInt(autoLockMinutes) : autoLockMinutes;
+    const clamped = Math.max(1, Math.min(60, isNaN(raw) ? 5 : raw));
     setAutoLockMinutes(clamped);
     if (clamped === settings?.auto_lock_minutes) return;
     try {
@@ -418,7 +419,7 @@ export default function SettingsPage() {
                         min="1"
                         max="60"
                         value={autoLockMinutes}
-                        onChange={(e) => setAutoLockMinutes(parseInt(e.target.value) || 5)}
+                        onChange={(e) => setAutoLockMinutes(e.target.value === '' ? '' : parseInt(e.target.value) || '')}
                         onBlur={handleAutoLockMinutesSave}
                         onKeyDown={(e) => { if (e.key === 'Enter') handleAutoLockMinutesSave(); }}
                         className="w-24"