fix: form submission behavior (#79)

Author: SKairinos

src/components/form/Form.tsx

@@ -77,7 +77,9 @@ const BaseForm = <Values extends FormValues>({
               {formik.errors.non_field_errors}
             </NonFieldErrors>
           )
-        } else if (order && order.length) {
+        }
+        // If a submission was attempted and refs to the fields were provided.
+        else if (formik.isSubmitting && order && order.length) {
           const errorNames = getKeyPaths(formik.errors)
 
           const inputRef = order.find(({ name }) =>

src/components/form/SubmitButton.tsx

@@ -32,7 +32,13 @@ const SubmitButton: FC<SubmitButtonProps> = ({
           type="button"
           onClick={() => {
             form.setTouched(getTouched(form.values), true).then(errors => {
-              if (!errors || !Object.keys(errors).length) form.submitForm()
+              const hasErrors = Boolean(errors && Object.keys(errors).length)
+              // If has errors, set isSubmitting=true so fields in the form are
+              // aware that a submission was attempted. Else, set
+              // isSubmitting=false as it will be set to true when calling
+              // submitForm().
+              form.setSubmitting(hasErrors)
+              if (!hasErrors) form.submitForm()
             })
           }}
           {...otherButtonProps}