lunar icon indicating copy to clipboard operation
lunar copied to clipboard

Form cannot be resubmitted after an error thrown in onSubmit

Open malash opened this issue 2 years ago • 0 comments

The Form component support throwing error in its onSubmit callback and renders the error message. But I my application, the FormAction is not reset to enabled even if I modify the input.

Full example: https://codesandbox.io/s/trusting-brown-42suu

Root cause: https://github.com/airbnb/lunar/blob/fe3ed9758675dc3deef0e06307b5d0bedce06952/packages/forms/src/components/FormActions/index.tsx#L14

A possible solution:

export default function FormActions(props: FormActionsProps) {
  const form = useForm();
  // this line changed
  const { submitting, valid, dirtySinceLastSubmit } = form.getState();

  return (
    <BaseFormActions
      {...props}
      // this line changed
      disabled={!dirtySinceLastSubmit && !valid}
      processing={submitting}
    />
  );
}

Ref: https://github.com/final-form/final-form/issues/48#issuecomment-352516804

malash avatar Sep 17 '21 04:09 malash