React hook form, setValue, reset doesnt affect input

[Denys357]

React hook form, setValue, reset doesnt affect input. Although I can see that the value in the react hook form has changed, but it doesn't show up on the field
I use value={props.value} which comes from react hook form field.value

[ArtyomVancyan]

@Denys357, can you please share a minimal React component with the React Hook Form and setValue included in it?

[Denys357]

@ArtyomVancyan https://codesandbox.io/p/sandbox/9w97sf?file=%2Fsrc%2FApp.tsx%3A21%2C31

[ArtyomVancyan]

@Denys357, the Sandbox is not accessible to me (It's likely that the Sandbox you're trying to access doesn't exist, or you don't have the required permissions to access it). Can you please make it public?

[Denys357]

@ArtyomVancyan sorry, fixed, try one more time https://codesandbox.io/p/sandbox/9w97sf?file=%2Fsrc%2FApp.tsx

[ArtyomVancyan]

Okay... Now, I see where the problem comes from. The issue is that the value is considered an initial value (I cannot remember why, but it had a reason to do so), and it is only changed using a Form context of the Ant Design. So, when using React Form Hooks, please wrap the Antd Phone Input with the Antd Form as represented in the following example:

import React from "react";
import { useForm, Controller } from "react-hook-form";
import FormItem from "antd/lib/form/FormItem";
import Form from "antd/lib/form";
import PhoneInput from "antd-phone-input";

type FormValues = {
  phone: string;
};

export default function App() {
  const [form] = Form.useForm();
  const { control, handleSubmit, setValue } = useForm<FormValues>({
    defaultValues: {
      phone: "",
    },
  });

  const onSubmit = (data: FormValues) => {
    console.log("Submitted:", data);
  };

  const handleClick = () => {
    setValue("phone", "+122343");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>Phone</label>
      <Controller
        name="phone"
        control={control}
        render={({ field }) => {
          form.setFieldValue(field.name, field.value);
          return (
            <Form form={form}>
              <FormItem name={field.name} noStyle>
                <PhoneInput
                  {...field}
                  value={field.value}
                  onChange={(val) => field.onChange(val)}
                />
              </FormItem>
            </Form>
          );
        }}
      />

      <button onClick={handleClick} style={{ marginTop: 12 }}>
        Submit
      </button>
    </form>
  );
}

[Denys357]

@ArtyomVancyan It helps. thanks!