airbnb / lunar

🌗 React toolkit and design language for Airbnb open source and internal projects.
MIT License
464 stars 77 forks source link

Form cannot be resubmitted after an error thrown in onSubmit #418

Open malash opened 3 years ago

malash commented 3 years ago

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