How to trigger onChange handler of a controlled component with the form's defaultValues?

[danielmarcano]

Hi there,

Is there a way to trigger the onChange handler of a controlled component with the form's defaultValues?

Here's a codesandbox that explains my doubt with the minimum code possible. In there, you will notice that the console.log is never shown, which is what has triggered my question.

The use-case I have is the following:

• I have a parent component with a form state, and sub-components that each represent a step of said form

• In one of my sub-components, I set a default timeZone within the defaultValues object, this way:

const defaultValues = useMemo(
    () => ({
      // ...
      timeZone: selectedTimeZone ? selectedTimeZone : getCurrentBrowserTimeZone(),
    }),
    [selectedTimeZone],
  );
  
  const {
    // ...
  } = useForm<UserInformationStepForm>({
    mode: 'all',
    resolver: yupResolver(formSchema),
    defaultValues,
  });

  useEffect(() => {
    reset(defaultValues);
  }, [reset, defaultValues]);

• And this is my controlled component, which has a custom onChange handler:

<Controller
            control={control}
            name="timeZone"
            render={({ field: { value }, fieldState: { error } }) => (
              <VirtualizedSelect
                options={timeZoneOptions}
                label="Time Zone"
                onChange={(newValue) => {
                  console.log('newValue', newValue);
                  onChangeForm({ timeZone: newValue });
                }}
                value={value}
                error={error}
              />
            )}
          />

Just like in the codesandbox, my controlled component does get set to the correct defaultValue, but the onChange handler is never called.

By writing this question, it has occurred to me that I can simply add getCurrentBrowserTimeZone() as the default value of my form state, right when I create it, within the parent component, and simply remove the function from these default values. This would work, but I still want to leave this question here in case someone can find its response helpful.

[Moshyfawn]

onChange is typically used as an input change event handler that corresponds to the firing of an input event, rather than indicating a change in the field value. This is an expected behavior, similar to how clicking the type="reset" button in an HTML form will not fire a change event, but will only trigger a reset event for the form.

[danielmarcano]

Makes total sense! Thanks for the explanation @Moshyfawn.