[@mantine/core] NumberInput: Improve onChange handler to be called …

…with number unless the input is empty (#5037)

src/mantine-core/src/components/NumberInput/NumberInput.story.tsx

@@ -20,6 +20,25 @@ export function Usage() {
   );
 }
 
+export function OnChangeValue() {
+  const [value, setValue] = useState<number | string>(345);
+  return (
+    <div style={{ padding: 40 }}>
+      <NumberInput
+        value={value}
+        label="Number input"
+        placeholder="Number input"
+        suffix="suf"
+        prefix="pref"
+        thousandSeparator
+        onChange={setValue}
+      />
+      {typeof value === 'number' ? `${value} number` : `${value === '' ? 'empty' : value} string`}
+      <Button onClick={() => setValue(245.32)}>Set value to float</Button>
+    </div>
+  );
+}
+
 export function RightSectionSizes() {
   return (
     <div

src/mantine-core/src/components/NumberInput/NumberInput.tsx

@@ -25,8 +25,8 @@ export interface NumberInputHandlers {
   decrement: () => void;
 }
 
-function isValidNumber(value: number | undefined): value is number {
-  return typeof value === 'number' && !Number.isNaN(value);
+function isValidNumber(value: number | string | undefined): value is number {
+  return (typeof value === 'number' || !Number.isNaN(Number(value))) && !Number.isNaN(value);
 }
 
 interface GetDecrementedValueInput {
@@ -231,11 +231,7 @@ export const NumberInput = factory<NumberInputFactory>((_props, ref) => {
   });
 
   const handleValueChange: OnValueChange = (payload, event) => {
-    setValue(
-      typeof _value === 'number' && isValidNumber(payload.floatValue)
-        ? payload.floatValue
-        : payload.value
-    );
+    setValue(isValidNumber(payload.floatValue) ? payload.floatValue : payload.value);
     onValueChange?.(payload, event);
   };