First keystroke does not change the FormState

[ChrisKulesza]

I have come across this issue several times now. Also currently I can't find a solution how to get a MUI TextField and MUI DatePicker component to interact with the FormContext and reset the FormState already at the first user interaction.

With the TextField I have now managed to get the not unfamiliar behavior via the onKeyUp event even on the first keystroke. The DatePicker is currently still a mystery to me.

Is someone so kind and take a look at my abstactions. It would first of all help me a lot to adapt the component to the expectations of a user and then I am also fundamentally concerned with understanding what happens or does not happen here.

Interesting behavior

If I access isValid of the FormState via console.log, the activation of the button already works after the first change. If I take console.log out again, only after the second change.

With console.log

Without console.log

Disable button

<PageHeaderButton
  onClick={methods.handleSubmit((values: BidPack) => {
    onSave(values);
    resetFormStateAndKeepFormValues(methods);
  })}
  disabled={!methods.formState.isValid}
>
  Save
</PageHeaderButton>

Thank you in advance

MUI DatePicker abstraction

export const RHFDatePicker = <
  TFieldValues extends FieldValues,
  TPath extends FieldPathByValue<TFieldValues, Date | null | undefined>
>({
  control,
  name,
  label,
  direction = "row",
  required,
}: {
  control: Control<TFieldValues>;
  name: TPath;
} & MdmFormProps &
  TextFieldProps &
  TextFieldInputProps) => {
  const {
    field,
    fieldState: { error },
  } = useController({
    control,
    name,
  });

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        {...field}
        label={label || name}
        onChange={field.onChange}
        inputFormat={kendoDefaultDateFormatddMMyyyy}
        renderInput={(params) => (
          <TextField
            {...params}
            {...textFieldDefaultProps}
            {...(direction === "row" ? textFieldDefaultProps : texFieldDefaultColumnProps)}
            onChange={field.onChange}
            error={!!error}
            helperText={error?.message}
            required={required}
          />
        )}
      />
    </LocalizationProvider>
  );
};

MUI TextField abstraction

export const TextFieldInput = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>({
  control,
  name,
  label,
  required,
  disabledFields,
  disabled,
  direction = "row",
  ...otherProps
}: RhfInputProps<TFieldValues, TName> & MdmFormProps & TextFieldProps & TextFieldInputProps) => {
  const {
    field,
    fieldState: { error },
  } = useController({
    control,
    name,
  });

  return (
    <TextField
      {...field}
      {...(direction === "row" ? textFieldDefaultProps : texFieldDefaultColumnProps)}
      {...otherProps}
      label={label || name}
      inputRef={field.ref}
      required={required}
      error={!!error}
      helperText={error?.message}
      disabled={disabled || isElementInArray(disabledFields, name)}
    />
  );
};

[Moshyfawn]

You want to "read" the particular form state to subscribe to it's value changes before it becomes reactive. You can destruct isValid to do so

+ const { isValid } = methods.formState
...
    <PageHeaderButton
-    disabled={!methods.formState.isValid}
+    disabled={!isValid}
    >

You can read more about this performance optimization in RHF using Proxy in formState rules section.

formState is wrapped with a Proxy to improve render performance and skip extra logic if specific state is not subscribed to. Therefore make sure you invoke or read it before a render in order to enable the state update.

[ChrisKulesza]

@Moshyfawn
Thank you for your help. I haven't thought about the fact that it is not yet reactive because I access it directly via methods.