From 7001f98353975e8ec5ea72bc6458795fe3f24b91 Mon Sep 17 00:00:00 2001
From: little Kitchen <55852668+littleKitchen@users.noreply.github.com>
Date: Mon, 2 Feb 2026 00:05:24 -0800
Subject: [PATCH] fix: unable to change zoom level back to 1.0 (#9283)

Fixed two issues with number input settings:

1. Added onBlur handler to immediately commit values when user
   clicks away, bypassing the 500ms debounce delay. This ensures
   values are saved even if the user navigates away quickly.

2. Added key prop based on current value to force re-render
   when the stored value changes, ensuring the input always
   reflects the actual persisted value.

Fixes #4035
---
 apps/web/src/dialogs/settings/index.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/apps/web/src/dialogs/settings/index.tsx b/apps/web/src/dialogs/settings/index.tsx
index 1ef2d1cb3..3000ce857 100644
--- a/apps/web/src/dialogs/settings/index.tsx
+++ b/apps/web/src/dialogs/settings/index.tsx
@@ -581,6 +581,7 @@ function SettingItem(props: { item: Setting }) {
               case "input":
                 return component.inputType === "number" ? (
                   <Input
+                    key={component.defaultValue()}
                     type={"number"}
                     min={component.min}
                     max={component.max}
@@ -597,6 +598,16 @@ function SettingItem(props: { item: Setting }) {
                           : value;
                       component.onChange(value);
                     }, 500)}
+                    onBlur={(e) => {
+                      let value = e.target.valueAsNumber;
+                      value =
+                        Number.isNaN(value) || value < component.min
+                          ? component.min
+                          : value > component.max
+                          ? component.max
+                          : value;
+                      component.onChange(value);
+                    }}
                   />
                 ) : (
                   <Input
@@ -607,6 +618,7 @@ function SettingItem(props: { item: Setting }) {
                       (e) => component.onChange(e.target.value),
                       500
                     )}
+                    onBlur={(e) => component.onChange(e.target.value)}
                   />
                 );
               case "icon":