isFieldsTouched turn "true" when use setFieldsValue antd form

I want to check user type in form with isFieldsTouched but when the first render, i fill data to the form and isFieldsTouched turn to "true", even i'm not touch at all. How can I fix this.

My version:
antd:4.21.5,
react:18.2.0

demo:here

I want isFieldsTouched false when I setFieldsValue. Anyone have solution. Thank alot

The way you are trying to detect if field is touched is wrong because useEffect dependency never changes. Assuming that you want to detect if field is touched or not after you set the field values. There are 2 ways to solve this problem.

First Approach: (Use onFieldsChange) and passing trigger='onFocus' in Form.Item

You can pass onFieldsChange to Form component and check the changedValues array if required field is touched or not. Note that we pass trigger='onFocus' that will trigger onFieldsChange otherwise onFieldsChange will only be called when any field value changes.

Remember changedValues is an array. Second value of value is an object containing following fields:

• name (Your field name is note. so name will be ['note'])
• value
• errors
• warnings
• touched
• validating

import { Form, Input } from "antd";
import React, { useEffect, useState } from "react";

const App: React.FC = () => {
  const [form] = Form.useForm();
  const [touch, setTouch] = useState(false);

  useEffect(() => {
    form.setFieldsValue({ note: "aaaaa" });
  }, [form]);

  console.log(touch);

  return (
    <Form
      form={form}
      onFieldsChange={(changedValue, allFields) => {
        changedValue.forEach((value) => {
          if (value.name.toString() === "note") {
            setTouch(value.touched ?? false);
          }
        });
      }}
    >
      <Form.Item name="note" trigger='onFocus'>
        <Input />
      </Form.Item>
    </Form>
  );
};

export default App;

Second Approach: (Use onFocus)

import { Form, Input } from "antd";
import React, { useEffect, useState } from "react";

const App: React.FC = () => {
  const [form] = Form.useForm();
  const [touch, setTouch] = useState(false);

  useEffect(() => {
    form.setFieldsValue({ note: "aaaaa" });
  }, [form]);

  console.log(touch);

  return (
    <Form form={form}>
      <Form.Item name="note">
        <Input onFocus={() => setTouch(true)} />
      </Form.Item>
    </Form>
  );
};

export default App;

Use first approach if your field value can be changed by any external field otherwise use second approach.

Hope this solves your problem