OnBlur it works incorrectly about ant-design HOT 9 CLOSED

Start a new pull request in StackBlitz Codeflow.

• react-4kmf1e-8gbufm (Open reproduction)

from ant-design.

Can you tell me about your requirements? In fact, the trigger property is used to declare the timing of the component's value change, and Form.Item will convert its child components into a controlled mode. If you set onblur, during the first rendering, because the value is undefined, the component is still in an uncontrolled state at this point, so the input behavior can change the value. However, after an onblur event is triggered once, the value is no longer undefined, and the component is now controlled. It will attempt to change the value through the onblur event, which, of course, will not update correctly. Of course, if you want to trigger validation when onblur occurs, please refer to validateTrigger.

from ant-design.

Can you tell me about your requirements? In fact, the trigger property is used to declare the timing of the component's value change, and Form.Item will convert its child components into a controlled mode. If you set onblur, during the first rendering, because the value is undefined, the component is still in an uncontrolled state at this point, so the input behavior can change the value. However, after an onblur event is triggered once, the value is no longer undefined, and the component is now controlled. It will attempt to change the value through the onblur event, which, of course, will not update correctly. Of course, if you want to trigger validation when onblur occurs, please refer to validateTrigger.

I need to send the value of the input field after onBlur

There is a form, somewhere there is a delay in sending data after entering, and somewhere I need to send data only when onBlur is triggered, and it turns out that after entering values I can no update the field

Also in my example on stackblitz note that input: number with onBlur, everything works fine, why is that?

from ant-design.

trigger means the value which will Form.Item to collect.

1. At the first time, the field value is undefined. So Input will work as uncontrolled component.
2. When onBlur, the value is set to what user input. The Input will be the controlled component. So any type will not work.

You should not use trigger for validation. But use validateTrigger instead.

from ant-design.

Also in my example on stackblitz note that input: number with onBlur, everything works fine, why is that?

Input follow the behavior as native input element since every time the input is what input validate value. But InputNumber has the flying status. e.g. 1.2 type 1., the 1. is not validate number. If it force as controlled, user will never successfully type the 1.2. So it will keep tracking typing status.

So if you want to follow the InputNumber behavior. You can HOC Input component to make focus not be controlled.

from ant-design.

Also in my example on stackblitz note that input: number with onBlur, everything works fine, why is that?

Input follow the behavior as native input element since every time the input is what input validate value. But InputNumber has the flying status. e.g. 1.2 type 1., the 1. is not validate number. If it force as controlled, user will never successfully type the 1.2. So it will keep tracking typing status.

So if you want to follow the InputNumber behavior. You can HOC Input component to make focus not be controlled.

again I need to get value in
<Form form={form} onValuesChange={debounceHandler}>
using
Form.Item with trigger="onBlur"

and whether input or textarea

Please give me an example where this would work

from ant-design.

again I need to get value in <Form form={form} onValuesChange={debounceHandler}> using Form.Item with trigger="onBlur"

and whether input or textarea

Please give me an example where this would work
If you need to perform some operations on onBlur, you can do it like this, but please make sure that the antd component you are using can accept the onBlur property.

from ant-design.

onBlur

I need onValuesChange to only work when onBlur is enabled.

your example still fires onValuesChange during input

from ant-design.

It feels a bit difficult to handle, as the form component triggers onValuesChange every time updateValue is called.

from ant-design.