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>
This commit is contained in:
Kyle 2026-02-25 17:01:06 +08:00
parent b0af07c270
commit 7d6ac4d257

View File

@ -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"