@martinsura/ui 0.1.9 → 0.1.10

package/dist/index.cjs

@@ -532,8 +532,18 @@ var NumberInput = ({
   const resolvedErrors = props.errorName ? resolveError(props.errorName) : [];
   const errorDisplay = props.error ?? props.customError ?? (resolvedErrors.length > 0 ? resolvedErrors.join(", ") : void 0);
   const hasError = !!errorDisplay;
+  const [internalValue, setInternalValue] = react.useState(
+    props.value != null ? String(props.value) : ""
+  );
+  const isFocused = react.useRef(false);
+  react.useEffect(() => {
+    if (!isFocused.current) {
+      setInternalValue(props.value != null ? String(props.value) : "");
+    }
+  }, [props.value]);
   const handleChange = (e) => {
     const raw = e.target.value;
+    setInternalValue(raw);
     if (raw === "" || raw === "-") {
       props.onChange?.(null);
       return;
@@ -543,6 +553,13 @@ var NumberInput = ({
       props.onChange?.(num);
     }
   };
+  const handleFocus = () => {
+    isFocused.current = true;
+  };
+  const handleBlur = () => {
+    isFocused.current = false;
+    setInternalValue(props.value != null ? String(props.value) : "");
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(InputField, { noMargin: props.noMargin, className: props.className, children: [
     props.label && /* @__PURE__ */ jsxRuntime.jsx(
       InputLabel,
@@ -558,11 +575,13 @@ var NumberInput = ({
       {
         type: "number",
         placeholder: props.placeholder,
-        value: props.value ?? "",
+        value: internalValue,
         disabled: props.disabled,
         min: props.min,
         max: props.max,
         onChange: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
         className: tailwindMerge.twMerge(
           numberInputClass,
           inputSizeClasses[size],