Form's normalize does not work correctly with InputNumber

[pobch]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

1. Go to https://codesandbox.io/s/ancient-dawn-fgwk0?file=/src/App.js
2. Type "987" in the input

What is expected?

Without blurring the input, it should display "0"

What is actually happening?

The input display "087"

Environment	Info
antd	4.18.8
React	17.0.2
System	Mac OS 12.1
Browser	Firefox 96

[pobch]

Same bug in the case of using setFieldsValue inside onChange #34023

[afc163]

It is not a bug, InputNumber will show 0 when you are typing 9 which is start of 987.

[pobch]

@afc163 ...If the same logic applied, it should behave like this:

1. Start to type 9 -> normalize is triggered -> output 0
2. Continue to type 8(now it's 08) -> normalize is triggered -> output 0

But, right now 1. and 2. are behave differently.

Moreover, if I switch from InputNumber to Input, this bug does not occur.

[afc163]

Try <InputNumber stringMode /> in this case.

[pobch]

Using stringMode does NOT solve the issue. @afc163

[afc163]

I suggest that creating a <InputNumberLessThen5 /> instead of using normalize: https://codesandbox.io/s/goofy-silence-1cpwkc?file=/src/App.js

import { useState } from "react";
import { Form, InputNumber } from "antd";
import "antd/dist/antd.css";

const InputNumberLessThen5 = (props) => {
  const [value, setValue] = useState(props.value);
  const onChange = (v) => {
    if (v >= 5) {
      setValue(5);
    } else {
      setValue(v);
    }
  };
  return <InputNumber {...props} value={value} onChange={onChange} />;
};

export default function App() {
  const [form] = Form.useForm();

  return (
    <Form form={form}>
      <Form.Item label="Must less than 5" name="lessThan5">
        <InputNumberLessThen5 />
      </Form.Item>
    </Form>
  );
}

[pobch]

I suggest that creating a <InputNumberLessThen5 /> instead of using normalize: https://codesandbox.io/s/goofy-silence-1cpwkc?file=/src/App.js

Your approach in codesandbox still NOT resolve the issue. If I type 987(3 keystrokes), the logic inside onChange will NOT be applied on 2nd and 3rd keystroke. @afc163

[pobch]

I think this issue is clearly a bug. The behavior of the first keystroke should not differ from other keystrokes, no matter we're using normalize prop or not.

[rfgonzalezweb]

it won't work well with <DatePicker/> either 😿
https://stackblitz.com/edit/react-ydr6fz?file=demo.js