SIMSBIOHUB-461: "Missing Field" snackbar fix

app/src/components/alert/FormikErrorSnackbar.tsx

@@ -0,0 +1,41 @@
+import Alert from '@mui/material/Alert';
+import Snackbar from '@mui/material/Snackbar';
+import { useFormikContext } from 'formik';
+import { useEffect, useState } from 'react';
+
+const FormikErrorSnackbar = () => {
+  const formikProps = useFormikContext<any>();
+  const { errors, submitCount, isSubmitting } = formikProps;
+  const [openSnackbar, setOpenSnackbar] = useState({ open: false, msg: '' });
+
+  useEffect(() => {
+    if (!Object.keys(errors).length || submitCount <= 0 || isSubmitting) {
+      return;
+    }
+
+    setOpenSnackbar({ open: true, msg: 'Missing one or more required fields.' });
+  }, [errors, submitCount, isSubmitting]);
+
+  const closeSnackBar = () =>
+    setOpenSnackbar((currentState) => {
+      return { open: false, msg: currentState.msg };
+    });
+
+  return (
+    <>
+      <Snackbar
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center'
+        }}
+        open={openSnackbar.open}
+        onClose={closeSnackBar}>
+        <Alert elevation={4} severity="error" variant="filled" onClose={closeSnackBar}>
+          {openSnackbar.msg}
+        </Alert>
+      </Snackbar>
+    </>
+  );
+};
+
+export default FormikErrorSnackbar;

app/src/components/species/AncillarySpeciesComponent.tsx

@@ -32,6 +32,7 @@ const AncillarySpeciesComponent = () => {
         required={false}
         handleAddSpecies={handleAddSpecies}
       />
+      <SelectedSpecies selectedSpecies={selectedSpecies} handleRemoveSpecies={handleRemoveSpecies} />
       {errors && get(errors, 'species.ancillary_species') && (
         <Box mt={3}>
           <AlertBar
@@ -42,7 +43,6 @@ const AncillarySpeciesComponent = () => {
           />
         </Box>
       )}
-      <SelectedSpecies selectedSpecies={selectedSpecies} handleRemoveSpecies={handleRemoveSpecies} />
     </>
   );
 };

app/src/components/species/FocalSpeciesComponent.tsx

@@ -7,13 +7,11 @@ import SelectedSpecies from './components/SelectedSpecies';
 import SpeciesAutocompleteField from './components/SpeciesAutocompleteField';
 
 const FocalSpeciesComponent = () => {
-  const { values, setFieldValue, setErrors, errors } = useFormikContext<ITaxonomy[]>();
+  const { values, setFieldValue, errors, submitCount } = useFormikContext<ITaxonomy[]>();
 
   const selectedSpecies: ITaxonomy[] = get(values, 'species.focal_species') || [];
-
   const handleAddSpecies = (species: ITaxonomy) => {
     setFieldValue(`species.focal_species[${selectedSpecies.length}]`, species);
-    setErrors([]);
   };
 
   const handleRemoveSpecies = (species_id: number) => {
@@ -32,7 +30,8 @@ const FocalSpeciesComponent = () => {
         required={true}
         handleAddSpecies={handleAddSpecies}
       />
-      {errors && get(errors, 'species.focal_species') && (
+      <SelectedSpecies selectedSpecies={selectedSpecies} handleRemoveSpecies={handleRemoveSpecies} />
+      {submitCount > 0 && errors && get(errors, 'species.focal_species') && (
         <Box mt={3}>
           <AlertBar
             severity="error"
@@ -42,7 +41,6 @@ const FocalSpeciesComponent = () => {
           />
         </Box>
       )}
-      <SelectedSpecies selectedSpecies={selectedSpecies} handleRemoveSpecies={handleRemoveSpecies} />
     </>
   );
 };

app/src/features/projects/create/CreateProjectForm.tsx

@@ -2,8 +2,8 @@ import { Theme } from '@mui/material';
 import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@mui/styles';
+import FormikErrorSnackbar from 'components/alert/FormikErrorSnackbar';
 import HorizontalSplitFormComponent from 'components/fields/HorizontalSplitFormComponent';
-import { ScrollToFormikError } from 'components/formik/ScrollToFormikError';
 import { PROJECT_ROLE } from 'constants/roles';
 import { Formik, FormikProps } from 'formik';
 import { useAuthStateContext } from 'hooks/useAuthStateContext';
@@ -101,13 +101,12 @@ const CreateProjectForm: React.FC<ICreateProjectForm> = (props) => {
       innerRef={formikRef}
       initialValues={props.initialValues || initialProjectFieldData}
       validationSchema={validationProjectYupSchema}
-      validateOnBlur={true}
+      validateOnBlur={false}
       validateOnChange={false}
       enableReinitialize={true}
       onSubmit={handleSubmit}>
       <>
-        <ScrollToFormikError fieldOrder={Object.keys(initialProjectFieldData)} />
-
+        <FormikErrorSnackbar />
         <HorizontalSplitFormComponent
           title="General Information"
           summary="Enter general information, objectives and timelines for the project."

app/src/features/projects/edit/EditProjectForm.tsx

@@ -3,6 +3,7 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@mui/styles';
+import FormikErrorSnackbar from 'components/alert/FormikErrorSnackbar';
 import HorizontalSplitFormComponent from 'components/fields/HorizontalSplitFormComponent';
 import { Formik, FormikProps } from 'formik';
 import { IGetAllCodeSetsResponse } from 'interfaces/useCodesApi.interface';
@@ -57,11 +58,12 @@ const EditProjectForm: React.FC<IEditProjectForm> = (props) => {
         innerRef={formikRef}
         initialValues={initialProjectFieldData as unknown as IUpdateProjectRequest}
         validationSchema={validationProjectYupSchema}
-        validateOnBlur={true}
+        validateOnBlur={false}
         validateOnChange={false}
         enableReinitialize={true}
         onSubmit={handleSubmit}>
         <>
+          <FormikErrorSnackbar />
           <HorizontalSplitFormComponent
             title="General Information"
             summary="Enter general information, objectives and timelines for the project."

app/src/features/surveys/CreateSurveyPage.tsx

@@ -8,9 +8,9 @@ import Link from '@mui/material/Link';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
+import FormikErrorSnackbar from 'components/alert/FormikErrorSnackbar';
 import { IErrorDialogProps } from 'components/dialog/ErrorDialog';
 import HorizontalSplitFormComponent from 'components/fields/HorizontalSplitFormComponent';
-import { ScrollToFormikError } from 'components/formik/ScrollToFormikError';
 import PageHeader from 'components/layout/PageHeader';
 import { DATE_FORMAT, DATE_LIMIT } from 'constants/dateTimeFormats';
 import { CreateSurveyI18N } from 'constants/i18n';
@@ -272,11 +272,11 @@ const CreateSurveyPage = () => {
               innerRef={formikRef}
               initialValues={surveyInitialValues}
               validationSchema={surveyYupSchemas}
-              validateOnBlur={true}
+              validateOnBlur={false}
               validateOnChange={false}
               onSubmit={handleSubmit}>
               <>
-                <ScrollToFormikError fieldOrder={Object.keys(surveyInitialValues)} />
+                <FormikErrorSnackbar />
                 <Stack gap={5} divider={<Divider flexItem />}>
                   <HorizontalSplitFormComponent
                     title="General Information"

app/src/features/surveys/edit/EditSurveyForm.tsx

@@ -4,8 +4,8 @@ import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
 import Paper from '@mui/material/Paper';
 import { makeStyles } from '@mui/styles';
+import FormikErrorSnackbar from 'components/alert/FormikErrorSnackbar';
 import HorizontalSplitFormComponent from 'components/fields/HorizontalSplitFormComponent';
-import { ScrollToFormikError } from 'components/formik/ScrollToFormikError';
 import { DATE_FORMAT, DATE_LIMIT } from 'constants/dateTimeFormats';
 import { default as dayjs } from 'dayjs';
 import SamplingStrategyForm from 'features/surveys/components/SamplingStrategyForm';
@@ -153,12 +153,11 @@ const EditSurveyForm: React.FC<IEditSurveyForm> = (props) => {
         innerRef={props.formikRef}
         initialValues={surveyInitialValues}
         validationSchema={surveyEditYupSchemas}
-        validateOnBlur={true}
+        validateOnBlur={false}
         validateOnChange={false}
         onSubmit={props.handleSubmit}>
         <>
-          <ScrollToFormikError fieldOrder={Object.keys(surveyInitialValues)} />
-
+          <FormikErrorSnackbar />
           <HorizontalSplitFormComponent
             title="General Information"
             summary=""