From 66b610e2010f6b0175066db9886a47cc8b705f4b Mon Sep 17 00:00:00 2001
From: Connor Yoh <connor@stirlingpdf.com>
Date: Mon, 18 Aug 2025 15:41:45 +0100
Subject: [PATCH] Fix twitchy defaults on number inputs

---
 .../tools/shared/NumberInputWithUnit.tsx       | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/tools/shared/NumberInputWithUnit.tsx b/frontend/src/components/tools/shared/NumberInputWithUnit.tsx
index 1a7830ad1..4e30c40d1 100644
--- a/frontend/src/components/tools/shared/NumberInputWithUnit.tsx
+++ b/frontend/src/components/tools/shared/NumberInputWithUnit.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Stack, Text, NumberInput } from "@mantine/core";
 
 interface NumberInputWithUnitProps {
@@ -20,14 +20,26 @@ const NumberInputWithUnit = ({
   max, 
   disabled = false 
 }: NumberInputWithUnitProps) => {
+  const [localValue, setLocalValue] = useState<number | string>(value);
+
+  // Sync local value when external value changes
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+
+  const handleBlur = () => {
+    onChange(localValue);
+  };
+
   return (
     <Stack gap="xs" style={{ flex: 1 }}>
       <Text size="xs" fw={500} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
         {label}
       </Text>
       <NumberInput
-        value={value}
-        onChange={onChange}
+        value={localValue}
+        onChange={setLocalValue}
+        onBlur={handleBlur}
         min={min}
         max={max}
         disabled={disabled}