Disable button when invalid form and submitting

onaio · Dec 11, 2023 · 3e6acc1 · 3e6acc1
1 parent cf83a0c
commit 3e6acc1
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 10 deletions.
diff --git a/packages/location-management/src/components/LocationForm/index.tsx b/packages/location-management/src/components/LocationForm/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Form, Input, Space, Button, Radio } from 'antd';
+import { Form, Input, Space, Button, Radio, FormInstance } from 'antd';
 import { sendErrorNotification, sendSuccessNotification } from '@opensrp/notifications';
 import { Redirect } from 'react-router';
 import { ExtraFields } from './ExtraFields';
@@ -175,6 +175,7 @@ const LocationForm = (props: LocationFormProps) => {
             is_jurisdiction: values.isJurisdiction,
           };
 
+          setSubmitting(true);
           postPutLocationUnit(payload, opensrpBaseURL, isEditMode, params)
             .then(() => {
               afterSubmit(payload);
@@ -353,14 +354,7 @@ const LocationForm = (props: LocationFormProps) => {
 
           <FormItem {...tailLayout}>
             <Space>
-              <Button
-                type="primary"
-                id="location-form-submit-button"
-                disabled={isSubmitting}
-                htmlType="submit"
-              >
-                {isSubmitting ? t('Saving') : t('Save')}
-              </Button>
+              <SubmitButton form={form} isSubmitting={isSubmitting} />
               <Button id="location-form-cancel-button" onClick={() => onCancel()}>
                 {t('Cancel')}
               </Button>
@@ -375,3 +369,34 @@ const LocationForm = (props: LocationFormProps) => {
 LocationForm.defaultProps = defaultProps;
 
 export { LocationForm };
+
+const SubmitButton = ({ form, isSubmitting }: { form: FormInstance; isSubmitting: boolean }) => {
+  const { t } = useTranslation();
+  const [submittable, setSubmittable] = React.useState(false);
+
+  // Watch all values
+  const values = Form.useWatch([], form);
+
+  React.useEffect(() => {
+    form.validateFields({ validateOnly: true }).then(
+      () => {
+        setSubmittable(true);
+      },
+      () => {
+        setSubmittable(false);
+      }
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [values]);
+
+  return (
+    <Button
+      type="primary"
+      id="location-form-submit-button"
+      disabled={isSubmitting || !submittable}
+      htmlType="submit"
+    >
+      {isSubmitting ? t('Saving') : t('Save')}
+    </Button>
+  );
+};
diff --git a/...s/location-management/src/components/LocationForm/tests/__snapshots__/index.test.tsx.snap b/...s/location-management/src/components/LocationForm/tests/__snapshots__/index.test.tsx.snap
@@ -461,7 +461,7 @@ exports[`LocationForm renders correctly: status label 1`] = `
 exports[`LocationForm renders correctly: submit button 1`] = `
 <button
   className="ant-btn css-dev-only-do-not-override-k7429z ant-btn-primary"
-  disabled={false}
+  disabled={true}
   id="location-form-submit-button"
   onClick={[Function]}
   type="submit"