Ant Design form value not reflecting in input field after programmatic update via form.setFieldsValue()

Question

I am working with an Ant Design form in React where I have an input field, and I want to programmatically update the value of that input field using a custom AI generator (TextGenarateur) that returns a new value every time.

I am using the form.setFieldsValue() method to update the input field with the generated value, but while the form value is correctly updated, the visual value in the input field does not reflect the change immediately. The value in the form state is changing, but the input field does not update with the new value until some other interaction occurs.

Here’s the relevant code:

<div className="mt-1 py-2">
  <Form.Item
    name={'name'}
    label={setLocale(true, "name")}
    rules={[{ required: true, message: 'Please input your meet name' }]}
  >
    <div className="d-flex align-items-center">
      <Input className="flex-grow-1 me-2 mr-2" />
      
      {hasAi && (
        <TextGenarateur
          prefix={"generate meet title in maximum 5 words:"}
          form={form}
          name={"name"}
          title="ai.text.generateur.title"
          onOk={(generatedText) => {
            form.setFieldsValue({ 'name': generatedText });
          }}
        />
      )}
    </div>
  </Form.Item>
</div>




   const handleClick = () => {
      const textValue = form?.getFieldValue(name) ? form?.getFieldValue(name) : text;
      const values = {
        message: "Provide a straightforward response for this Action => " + prefix + ' ' + (textValue ? textValue : "New Meeting"),
      };
      setIsLoading(true);
      MeetServices.generateText(values).then((res) => {
        onOk(res.data[0]);
      }).finally(() => {
        setIsLoading(false);
      }).catch((err) => {
        console.error(err);
      });
    };

Problem:

• The TextGenarateur component triggers the onOk callback which receives a new generated text.

• This new generated text is passed to form.setFieldsValue({ 'name': generatedText }), which updates the form state and sets the name field value.

• The form value (form.getFieldValue('name')) is correctly updated, but the Input field does not immediately reflect the new value visually.

• I am unable to see the updated value in the input field until some other event triggers a re-render or re-focus.

Expected Behavior:

• After the form.setFieldsValue({ 'name': generatedText }) call in the onOk callback, I expect the value of the input field to immediately reflect the new generated text.

Answer 1

I would need to know the content of TextGenarateur component but it seems that you have another Form.Item or a native input inside, which is interfering with the parent Form.Item. I would try moving the other component outside the parent Form.Item.