chore: blur with empty string will trigger null as change event (#296)

* chore: onChange can trigger null when empty

* chore: empty should trigger as null

Author: zombieJ

docs/examples/simple.tsx

@@ -11,12 +11,13 @@ export default () => {
   const [value, setValue] = React.useState<string | number>(5);
 
   const onChange = (val: number) => {
-    console.warn('onChange:', val);
+    console.warn('onChange:', val, typeof val);
     setValue(val);
   };
 
   return (
     <div style={{ margin: 10 }}>
+      <h3>Controlled</h3>
       <InputNumber
         aria-label="Simple number input example"
         min={-8}
@@ -43,6 +44,10 @@ export default () => {
           toggle stringMode ({String(stringMode)})
         </button>
       </p>
+
+      <hr />
+      <h3>Uncontrolled</h3>
+      {/* <InputNumber style={{ width: 100 }} onChange={onChange} defaultValue={33} /> */}
     </div>
   );
 };

src/InputNumber.tsx

@@ -285,7 +285,7 @@ const InputNumber = React.forwardRef(
         // Trigger event
         if (!updateValue.equals(decimalValue)) {
           setUncontrolledDecimalValue(updateValue);
-          onChange?.(getDecimalValue(stringMode, updateValue));
+          onChange?.(updateValue.isEmpty() ? null : getDecimalValue(stringMode, updateValue));
 
           // Reformat input if value is not controlled
           if (value === undefined) {
@@ -381,11 +381,9 @@ const InputNumber = React.forwardRef(
       let formatValue: DecimalClass = parsedValue;
 
       if (!parsedValue.isNaN()) {
-        // Only validate value can be re-fill to inputValue
-        if (!formatValue.isEmpty()) {
-          // Reassign the formatValue within ranged of trigger control
-          formatValue = triggerValueUpdate(parsedValue, true);
-        }
+        // Only validate value or empty value can be re-fill to inputValue
+        // Reassign the formatValue within ranged of trigger control
+        formatValue = triggerValueUpdate(parsedValue, true);
       } else {
         formatValue = decimalValue;
       }

src/hooks/useUpdateEffect.ts

@@ -6,7 +6,7 @@ import * as React from 'react';
 export default function useUpdateEffect(callback: () => void | (() => void), condition: any[]) {
   const initRef = React.useRef(false);
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (!initRef.current) {
       initRef.current = true;
       return undefined;

tests/github.test.tsx

@@ -211,12 +211,13 @@ describe('InputNumber.Github', () => {
     expect(onInput).toHaveBeenCalledWith('');
 
     wrapper.blurInput();
-    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledTimes(2);
     expect(onInput).toHaveBeenCalledTimes(2);
+    expect(onChange).toHaveBeenLastCalledWith(null);
 
     wrapper.focusInput();
     wrapper.blurInput();
-    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledTimes(2);
     expect(onInput).toHaveBeenCalledTimes(2);
   });