fix: auto-scroll to the first invalid form field #873

apache · Apr 25, 2024 · 76c55fc · 76c55fc
1 parent eeb668e
commit 76c55fc
Show file tree

Hide file tree

Showing 26 changed files with 187 additions and 38 deletions.
diff --git a/ui/src/components/SchemaForm/index.tsx b/ui/src/components/SchemaForm/index.tsx
@@ -29,6 +29,7 @@ import { useTranslation } from 'react-i18next';
 import isEmpty from 'lodash/isEmpty';
 import classnames from 'classnames';
 
+import { scrollToElementTop } from '@/utils';
 import type * as Type from '@/common/interface';
 
 import type {
@@ -201,6 +202,7 @@ const SchemaForm: ForwardRefRenderFunction<FormRef, FormProps> = (
       if (onChange instanceof Function) {
         onChange({ ...formData });
       }
+      scrollToElementTop(document.getElementById(errors[0]));
       return false;
     }
     const syncErrors = await syncValidator();
@@ -216,6 +218,7 @@ const SchemaForm: ForwardRefRenderFunction<FormRef, FormProps> = (
       if (onChange instanceof Function) {
         onChange({ ...formData });
       }
+      scrollToElementTop(document.getElementById(syncErrors[0].key));
       return false;
     }
     return true;

diff --git a/ui/src/pages/Admin/Branding/index.tsx b/ui/src/pages/Admin/Branding/index.tsx
@@ -25,7 +25,7 @@ import { FormDataType } from '@/common/interface';
 import { brandSetting, getBrandSetting } from '@/services';
 import { brandingStore } from '@/stores';
 import { useToast } from '@/hooks';
-import { handleFormError } from '@/utils';
+import { handleFormError, scrollToElementTop } from '@/utils';
 
 const uploadType = 'branding';
 const Index: FC = () => {
@@ -145,6 +145,8 @@ const Index: FC = () => {
         if (err.isError) {
           const data = handleFormError(err, formData);
           setFormData({ ...data });
+          const ele = document.getElementById(err.list[0].error_field);
+          scrollToElementTop(ele);
         }
       });
   };

diff --git a/ui/src/pages/Admin/CssAndHtml/index.tsx b/ui/src/pages/Admin/CssAndHtml/index.tsx
@@ -24,7 +24,7 @@ import type * as Type from '@/common/interface';
 import { getPageCustom, putPageCustom } from '@/services';
 import { SchemaForm, JSONSchema, initFormData, UISchema } from '@/components';
 import { useToast } from '@/hooks';
-import { handleFormError } from '@/utils';
+import { handleFormError, scrollToElementTop } from '@/utils';
 import { customizeStore } from '@/stores';
 
 const Index: FC = () => {
@@ -124,6 +124,8 @@ const Index: FC = () => {
         if (err.isError) {
           const data = handleFormError(err, formData);
           setFormData({ ...data });
+          const ele = document.getElementById(err.list[0].error_field);
+          scrollToElementTop(ele);
         }
       });
   };

diff --git a/ui/src/pages/Admin/General/index.tsx b/ui/src/pages/Admin/General/index.tsx
@@ -26,7 +26,7 @@ import { useToast } from '@/hooks';
 import { siteInfoStore } from '@/stores';
 import { useGeneralSetting, updateGeneralSetting } from '@/services';
 import Pattern from '@/common/pattern';
-import { handleFormError } from '@/utils';
+import { handleFormError, scrollToElementTop } from '@/utils';
 
 const General: FC = () => {
   const { t } = useTranslation('translation', {
@@ -157,6 +157,8 @@ const General: FC = () => {
         if (err.isError) {
           const data = handleFormError(err, formData);
           setFormData({ ...data });
+          const ele = document.getElementById(err.list[0].error_field);
+          scrollToElementTop(ele);
         }
       });
   };

diff --git a/ui/src/pages/Admin/Interface/index.tsx b/ui/src/pages/Admin/Interface/index.tsx
@@ -39,7 +39,7 @@ import {
   loadLanguageOptions,
   setupAppTimeZone,
 } from '@/utils/localize';
-import { handleFormError } from '@/utils';
+import { handleFormError, scrollToElementTop } from '@/utils';
 
 const Interface: FC = () => {
   const { t } = useTranslation('translation', {
@@ -141,6 +141,8 @@ const Interface: FC = () => {
         if (err.isError) {
           const data = handleFormError(err, formData);
           setFormData({ ...data });
+          const ele = document.getElementById(err.list[0].error_field);
+          scrollToElementTop(ele);
         }
       });
   };

diff --git a/ui/src/pages/Admin/Legal/index.tsx b/ui/src/pages/Admin/Legal/index.tsx
@@ -26,7 +26,7 @@ import type * as Type from '@/common/interface';
 import { SchemaForm, JSONSchema, initFormData, UISchema } from '@/components';
 import { useToast } from '@/hooks';
 import { getLegalSetting, putLegalSetting } from '@/services';
-import { handleFormError } from '@/utils';
+import { handleFormError, scrollToElementTop } from '@/utils';
 
 const Legal: FC = () => {
   const { t } = useTranslation('translation', {
@@ -90,6 +90,8 @@ const Legal: FC = () => {
         if (err.isError) {
           const data = handleFormError(err, formData);
           setFormData({ ...data });
+          const ele = document.getElementById(err.list[0].error_field);
+          scrollToElementTop(ele);
         }
       });
   };

diff --git a/ui/src/pages/Admin/Login/index.tsx b/ui/src/pages/Admin/Login/index.tsx
@@ -24,7 +24,7 @@ import type * as Type from '@/common/interface';
 import { getLoginSetting, putLoginSetting } from '@/services';
 import { SchemaForm, JSONSchema, initFormData, UISchema } from '@/components';
 import { useToast } from '@/hooks';
-import { handleFormError } from '@/utils';
+import { handleFormError, scrollToElementTop } from '@/utils';
 import { loginSettingStore } from '@/stores';
 
 const Index: FC = () => {
@@ -132,6 +132,8 @@ const Index: FC = () => {
         if (err.isError) {
           const data = handleFormError(err, formData);
           setFormData({ ...data });
+          const ele = document.getElementById(err.list[0].error_field);
+          scrollToElementTop(ele);
         }
       });
   };

diff --git a/ui/src/pages/Admin/Privileges/index.tsx b/ui/src/pages/Admin/Privileges/index.tsx
@@ -29,7 +29,7 @@ import {
   AdminSettingsPrivilege,
   AdminSettingsPrivilegeReq,
 } from '@/services';
-import { handleFormError } from '@/utils';
+import { handleFormError, scrollToElementTop } from '@/utils';
 import { ADMIN_PRIVILEGE_CUSTOM_LEVEL } from '@/common/constants';
 
 const Index: FC = () => {
@@ -83,10 +83,10 @@ const Index: FC = () => {
           validator: (value: string) => {
             const val = Number(value);
             if (Number.isNaN(val)) {
-              return 'the input should be number';
+              return t('msg.should_be_number');
             }
             if (val < 1) {
-              return 'number should be equal or larger than 1';
+              return t('msg.number_larger_1');
             }
             return true;
           },
@@ -148,6 +148,8 @@ const Index: FC = () => {
         if (err.isError) {
           const data = handleFormError(err, formData);
           setFormData({ ...data });
+          const ele = document.getElementById(err.list[0].error_field);
+          scrollToElementTop(ele);
         }
       });
   };

diff --git a/ui/src/pages/Admin/Seo/index.tsx b/ui/src/pages/Admin/Seo/index.tsx
@@ -24,7 +24,7 @@ import type * as Type from '@/common/interface';
 import { getSeoSetting, putSeoSetting } from '@/services';
 import { SchemaForm, JSONSchema, initFormData, UISchema } from '@/components';
 import { useToast } from '@/hooks';
-import { handleFormError } from '@/utils';
+import { handleFormError, scrollToElementTop } from '@/utils';
 import { seoSettingStore } from '@/stores';
 
 const Index: FC = () => {
@@ -90,6 +90,8 @@ const Index: FC = () => {
         if (err.isError) {
           const data = handleFormError(err, formData);
           setFormData({ ...data });
+          const ele = document.getElementById(err.list[0].error_field);
+          scrollToElementTop(ele);
         }
       });
   };

diff --git a/ui/src/pages/Admin/SettingsUsers/index.tsx b/ui/src/pages/Admin/SettingsUsers/index.tsx
@@ -29,7 +29,7 @@ import {
   putUsersSetting,
   AdminSettingsUsers,
 } from '@/services';
-import { handleFormError } from '@/utils';
+import { handleFormError, scrollToElementTop } from '@/utils';
 import * as Type from '@/common/interface';
 import { siteInfoStore } from '@/stores';
 
@@ -168,6 +168,8 @@ const Index: FC = () => {
         if (err.isError) {
           const data = handleFormError(err, formData);
           setFormData({ ...data });
+          const ele = document.getElementById(err.list[0].error_field);
+          scrollToElementTop(ele);
         }
       });
   };

diff --git a/ui/src/pages/Admin/Smtp/index.tsx b/ui/src/pages/Admin/Smtp/index.tsx
@@ -25,7 +25,7 @@ import { useToast } from '@/hooks';
 import { useSmtpSetting, updateSmtpSetting } from '@/services';
 import pattern from '@/common/pattern';
 import { SchemaForm, JSONSchema, UISchema, initFormData } from '@/components';
-import { handleFormError } from '@/utils';
+import { handleFormError, scrollToElementTop } from '@/utils';
 
 const Smtp: FC = () => {
   const { t } = useTranslation('translation', {
@@ -182,6 +182,8 @@ const Smtp: FC = () => {
         if (err.isError) {
           const data = handleFormError(err, formData);
           setFormData({ ...data });
+          const ele = document.getElementById(err.list[0].error_field);
+          scrollToElementTop(ele);
         }
       });
   };

diff --git a/ui/src/pages/Admin/Themes/index.tsx b/ui/src/pages/Admin/Themes/index.tsx
@@ -24,7 +24,7 @@ import type * as Type from '@/common/interface';
 import { getThemeSetting, putThemeSetting } from '@/services';
 import { SchemaForm, JSONSchema, initFormData, UISchema } from '@/components';
 import { useToast } from '@/hooks';
-import { handleFormError } from '@/utils';
+import { handleFormError, scrollToElementTop } from '@/utils';
 import { themeSettingStore } from '@/stores';
 import { setupAppTheme } from '@/utils/localize';
 
@@ -135,6 +135,8 @@ const Index: FC = () => {
         if (err.isError) {
           const data = handleFormError(err, formData);
           setFormData({ ...data });
+          const ele = document.getElementById(err.list[0].error_field);
+          scrollToElementTop(ele);
         }
       });
   };

diff --git a/ui/src/pages/Admin/Write/index.tsx b/ui/src/pages/Admin/Write/index.tsx
@@ -27,7 +27,7 @@ import {
   getRequireAndReservedTag,
   postRequireAndReservedTag,
 } from '@/services';
-import { handleFormError } from '@/utils';
+import { handleFormError, scrollToElementTop } from '@/utils';
 import { writeSettingStore } from '@/stores';
 
 const Index: FC = () => {
@@ -121,6 +121,8 @@ const Index: FC = () => {
         if (err.isError) {
           const data = handleFormError(err, formData);
           setFormData({ ...data });
+          const ele = document.getElementById(err.list[0].error_field);
+          scrollToElementTop(ele);
         }
       });
   };

diff --git a/ui/src/pages/Install/index.tsx b/ui/src/pages/Install/index.tsx
@@ -29,7 +29,12 @@ import {
   installBaseInfo,
   checkConfigFileExists,
 } from '@/services';
-import { Storage, handleFormError, scrollToDocTop } from '@/utils';
+import {
+  Storage,
+  handleFormError,
+  scrollToDocTop,
+  scrollToElementTop,
+} from '@/utils';
 import { CURRENT_LANG_STORAGE_KEY } from '@/common/constants';
 
 import {
@@ -201,6 +206,8 @@ const Index: FC = () => {
         if (err.isError) {
           const data = handleFormError(err, formData);
           setFormData({ ...data });
+          const ele = document.getElementById(err.list[0].error_field);
+          scrollToElementTop(ele);
         } else {
           handleErr(err);
         }

diff --git a/ui/src/pages/Questions/Ask/index.tsx b/ui/src/pages/Questions/Ask/index.tsx
@@ -40,7 +40,12 @@ import {
   getTagsBySlugName,
   saveQuestionWithAnswer,
 } from '@/services';
-import { handleFormError, SaveDraft, storageExpires } from '@/utils';
+import {
+  handleFormError,
+  SaveDraft,
+  storageExpires,
+  scrollToElementTop,
+} from '@/utils';
 import { pathFactory } from '@/router/pathFactory';
 import { useCaptchaPlugin } from '@/utils/pluginKit';
 
@@ -300,6 +305,8 @@ const Ask = () => {
           editCaptcha?.handleCaptchaError(err.list);
           const data = handleFormError(err, formData);
           setFormData({ ...data });
+          const ele = document.getElementById(err.list[0].error_field);
+          scrollToElementTop(ele);
         }
       });
   };
@@ -321,6 +328,8 @@ const Ask = () => {
           if (!(captchaErr && err.list.length === 1)) {
             const data = handleFormError(err, formData);
             setFormData({ ...data });
+            const ele = document.getElementById(err.list[0].error_field);
+            scrollToElementTop(ele);
           }
         }
       });
@@ -331,6 +340,8 @@ const Ask = () => {
           if (!(captchaErr && err.list.length === 1)) {
             const data = handleFormError(err, formData);
             setFormData({ ...data });
+            const ele = document.getElementById(err.list[0].error_field);
+            scrollToElementTop(ele);
           }
         }
       });
@@ -443,7 +454,7 @@ const Ask = () => {
               </Form.Control.Feedback>
               {bool && <SearchQuestion similarQuestions={similarQuestions} />}
             </Form.Group>
-            <Form.Group controlId="body">
+            <Form.Group controlId="content">
               <Form.Label>{t('form.fields.body.label')}</Form.Label>
               <Form.Control
                 defaultValue={formData.content.value}

diff --git a/ui/src/pages/Review/components/EditPostModal/index.tsx b/ui/src/pages/Review/components/EditPostModal/index.tsx
@@ -32,6 +32,7 @@ import {
   parseUserInfo,
   handleFormError,
   parseEditMentionUser,
+  scrollToElementTop,
 } from '@/utils';
 import type * as Type from '@/common/interface';
 
@@ -158,6 +159,15 @@ const Index: FC<Props> = ({
     setFormData({
       ...formData,
     });
+
+    if (!bol) {
+      const errObj = Object.keys(formData).filter(
+        (key) => formData[key].isInvalid,
+      );
+      const ele = document.getElementById(errObj[0]);
+      scrollToElementTop(ele);
+    }
+
     return bol;
   };
 
@@ -202,6 +212,9 @@ const Index: FC<Props> = ({
           editCaptcha?.handleCaptchaError(err.list);
           const data = handleFormError(err, formData);
           setFormData({ ...data });
+
+          const ele = document.getElementById(err.list[0].error_field);
+          scrollToElementTop(ele);
         }
       });
   };