fix: FieldWrapper… TACC-Cloud/Hazmapper form crash

TACC-Cloud/hazmapper's only form crashed.
If checkbox is removed, then now it doesn't.

Expect checkbox fix in next commit.

TACC-Cloud/hazmapper#239

libs/core-components/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx

@@ -1,42 +1,42 @@
 import React from 'react';
-import { ErrorMessage } from 'formik';
+import { FieldProps } from 'formik';
 import { Badge } from 'reactstrap';
 
 import './FieldWrapperFormik.global.css';
 
 export type FieldWrapperProps = {
-  name: string;
+  id?: string;
   label: React.ReactNode;
   required?: boolean;
   className?: string;
   description?: React.ReactNode;
+  formik: FieldProps;
 };
+
 const FieldWrapper: React.FC<React.PropsWithChildren<FieldWrapperProps>> = ({
-  name,
+  id,
   label,
   required,
   description,
   className,
   children,
+  formik: {field, form},
 }) => {
   return (
     <div
       className={`c-form__field ${required ? 'has-required' : ''} ${className}`}
     >
-      <label htmlFor={name}>
+      <label htmlFor={id || field.name}>
         {label}
         {required && <Badge color="danger">Required</Badge>}
       </label>
       {children}
-      <ErrorMessage name={name}>
-        {(msg) => {
-          return (
-            <ul className="c-form__errors">
-              <li>{msg}</li>
-            </ul>
-          );
-        }}
-      </ErrorMessage>
+      {form.touched[field.name] && form.errors[field.name] ? (
+        <ul className="c-form__errors">
+          {/* https://github.com/jaredpalmer/formik/issues/3683#issuecomment-1752751768 */}
+          <li>{String(form.errors[field.name])}</li>
+        </ul>
+      ) : null}
       {description && <div className="c-form__help">{description}</div>}
     </div>
   );

libs/core-components/src/lib/FieldWrapperFormik/fields/FormikFileInput/FileDropzone.tsx

@@ -5,6 +5,7 @@ import { InlineMessage, Button } from '../../../..';
 import styles from './FileDropzone.module.css';
 
 interface FileInputDropzoneProps {
+  id: string;
   files: File[];
   onDrop: (files: File[]) => void;
   onRemoveFile: (index: number) => void;
@@ -18,6 +19,7 @@ interface FileInputDropzoneProps {
  * and user can manage (e.g. delete those files) directly in this component.
  */
 const FileInputDropZone: React.FC<FileInputDropzoneProps> = ({
+  id,
   files,
   onDrop,
   maxSize,
@@ -60,7 +62,7 @@ const FileInputDropZone: React.FC<FileInputDropzoneProps> = ({
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
     <div {...getRootProps()} className={styles['dropzone-area']}>
-      <input {...getInputProps()} data-testid="dropzone-input" />
+      <input {...getInputProps()} data-testid="dropzone-input" id={id} />
       {!showFileList && (
         <div className={styles['no-attachment-view']}>
           <i className="icon icon-upload" />

libs/core-components/src/lib/FieldWrapperFormik/fields/FormikFileInput/FormikFileInput.tsx

@@ -1,27 +1,32 @@
 /* FP-993: Allow use by DataFilesUploadModal */
 import React from 'react';
-import { useField } from 'formik';
+import { useField, FieldProps } from 'formik';
 import FileInputDropZone from './FileDropzone';
 import FieldWrapper from '../../FieldWrapperFormik';
 
-interface FormikFileInputProps {
+interface FormikFileInputProps extends FieldProps {
+  id: string;
   name: string;
   label: string;
   required: boolean;
   description: string;
   maxSizeMessage: string;
   maxSize: number;
-}
+};
 
 const FileInputDropZoneFormField: React.FC<FormikFileInputProps> = ({
+  id,
   name,
   label,
   description,
   maxSizeMessage,
   maxSize,
   required,
+  field,
+  form,
+  meta,
 }) => {
-  const [field, , helpers] = useField<File[]>(name);
+  const [, , helpers] = useField<File[]>(name);
 
   const onSetFiles = (acceptedFiles: File[]) => {
     const newAcceptedFiles = acceptedFiles.filter(
@@ -35,12 +40,14 @@ const FileInputDropZoneFormField: React.FC<FormikFileInputProps> = ({
   };
   return (
     <FieldWrapper
-      name={name}
+      id={id}
       label={label}
       required={required}
       description={description}
+      formik={{field, form, meta}}
     >
       <FileInputDropZone
+        id={id}
         files={field.value}
         onDrop={onSetFiles}
         onRemoveFile={onRemoveFile}

libs/core-components/src/lib/FieldWrapperFormik/fields/FormikInput.tsx

@@ -1,24 +1,27 @@
 import React from 'react';
 import FieldWrapper from '../FieldWrapperFormik';
-import { useField } from 'formik';
 import { FormikInputProps } from '.';
 
 const FormikInput: React.FC<FormikInputProps> = ({
+  id,
   name,
   label,
   required,
   description,
+  field,
+  form,
+  meta,
   ...props
 }: FormikInputProps) => {
-  const [field] = useField(name);
   return (
     <FieldWrapper
-      name={name}
+      id={id}
       label={label}
       required={required}
       description={description}
+      formik={{field, form, meta}}
     >
-      <input {...field} {...props} id={name} />
+      <input {...field} {...props} id={id} />
     </FieldWrapper>
   );
 };

libs/core-components/src/lib/FieldWrapperFormik/fields/FormikSelect.tsx

@@ -1,25 +1,28 @@
 import React from 'react';
 import FieldWrapper from '../FieldWrapperFormik';
-import { useField } from 'formik';
 import { FormikSelectProps } from '.';
 
 const FormikTextarea: React.FC<FormikSelectProps> = ({
+  id,
   name,
   label,
   required,
   description,
   children,
+  field,
+  form,
+  meta,
   ...props
 }: FormikSelectProps) => {
-  const [field] = useField(name);
   return (
     <FieldWrapper
-      name={name}
+      id={id}
       label={label}
       required={required}
       description={description}
+      formik={{field, form, meta}}
     >
-      <select {...field} {...props} id={name}>
+      <select {...field} {...props} id={id}>
         {children}
       </select>
     </FieldWrapper>

libs/core-components/src/lib/FieldWrapperFormik/fields/FormikTextarea.tsx

@@ -1,24 +1,27 @@
 import React from 'react';
 import FieldWrapper from '../FieldWrapperFormik';
-import { useField } from 'formik';
 import { FormikTextareaProps } from '.';
 
 const FormikTextarea: React.FC<FormikTextareaProps> = ({
+  id,
   name,
   label,
   required,
   description,
+  field,
+  form,
+  meta,
   ...props
 }: FormikTextareaProps) => {
-  const [field] = useField(name);
   return (
     <FieldWrapper
-      name={name}
+      id={id}
       label={label}
       required={required}
       description={description}
+      formik={{field, form, meta}}
     >
-      <textarea {...field} {...props} id={name} />
+      <textarea {...field} {...props} id={id} />
     </FieldWrapper>
   );
 };

libs/core-components/src/lib/FieldWrapperFormik/fields/index.ts

@@ -1,23 +1,25 @@
+import { FieldProps } from 'formik';
+
 export type FormikInputProps = {
   name: string;
   label: string;
   required?: boolean;
   description?: string;
-} & React.InputHTMLAttributes<HTMLInputElement>;
+} & FieldProps & React.InputHTMLAttributes<HTMLInputElement>;
 
 export type FormikTextareaProps = {
   name: string;
   label: string;
   required?: boolean;
   description?: string;
-} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+} & FieldProps & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 
 export type FormikSelectProps = {
   name: string;
   label: string;
   required?: boolean;
   description?: string;
-} & React.SelectHTMLAttributes<HTMLSelectElement>;
+} & FieldProps & React.SelectHTMLAttributes<HTMLSelectElement>;
 
 export { default as FormikInput } from './FormikInput';
 export { default as FormikSelect } from './FormikSelect';