diff --git a/apps/client/src/widgets/react/FormTextBox.tsx b/apps/client/src/widgets/react/FormTextBox.tsx
index db67bf6c9..27df6326c 100644
--- a/apps/client/src/widgets/react/FormTextBox.tsx
+++ b/apps/client/src/widgets/react/FormTextBox.tsx
@@ -9,22 +9,26 @@ interface FormTextBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "
 }
 
 export default function FormTextBox({ inputRef, className, type, currentValue, onChange, onBlur, autoFocus, ...rest}: FormTextBoxProps) {
-    if (type === "number" && currentValue) {
-        const { min, max } = rest;
-        const currentValueNum = parseInt(currentValue, 10);
-        if (min && currentValueNum < parseInt(String(min), 10)) {
-            currentValue = String(min);
-        } else if (max && currentValueNum > parseInt(String(max), 10)) {
-            currentValue = String(max);
-        }
-    }
-
     useEffect(() => {
         if (autoFocus) {
             inputRef?.current?.focus();
         }
     }, []);
 
+    function applyLimits(value: string) {
+        if (type === "number") {
+            const { min, max } = rest;
+            const currentValueNum = parseInt(value, 10);
+            if (min && currentValueNum < parseInt(String(min), 10)) {
+                return String(min);
+            } else if (max && currentValueNum > parseInt(String(max), 10)) {
+                return String(max);
+            }
+        }
+
+        return value;
+    }
+
     return (
         <input
             ref={inputRef}
@@ -33,11 +37,13 @@ export default function FormTextBox({ inputRef, className, type, currentValue, o
             value={currentValue}
             onInput={onChange && (e => {
                 const target = e.currentTarget;
-                onChange?.(target.value, target.validity);
+                const currentValue = applyLimits(e.currentTarget.value);
+                onChange?.(currentValue, target.validity);
             })}
-            onBlur={onBlur && (e => {
-                const target = e.currentTarget;
-                onBlur(target.value);
+            onBlur={(e => {
+                const currentValue = applyLimits(e.currentTarget.value);
+                e.currentTarget.value = currentValue;
+                onBlur?.(currentValue);
             })}
             {...rest}
         />
@@ -49,6 +55,6 @@ export function FormTextBoxWithUnit(props: FormTextBoxProps & { unit: string })
         <label class="input-group tn-number-unit-pair">
             <FormTextBox {...props} />
             <span class="input-group-text">{props.unit}</span>
-        </label>        
+        </label>
     )
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx
index 233186ffe..20ace18f7 100644
--- a/apps/client/src/widgets/type_widgets/options/appearance.tsx
+++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx
@@ -294,7 +294,7 @@ function MaxContentWidth() {
                 <FormGroup name="max-content-width" label={t("max_content_width.max_width_label")}>
                     <FormTextBoxWithUnit
                         type="number" min={MIN_CONTENT_WIDTH} step="10"
-                        currentValue={maxContentWidth} onChange={setMaxContentWidth}
+                        currentValue={maxContentWidth} onBlur={setMaxContentWidth}
                         unit={t("max_content_width.max_width_unit")}
                     />
                 </FormGroup>