From fa2580fcfbcd8eb4a8d6e7c43bb3905e410311a4 Mon Sep 17 00:00:00 2001
From: Heath Chiavettone <heath.chiavettone@freenome.com>
Date: Mon, 8 Jan 2024 14:32:25 -0800
Subject: [PATCH] Fix: Change FormHelperText usage with @mui/material to render
 divs Fixes #4031 by switching the render component for `FormHelperText` to be
 `div` - In `@rjsf/mui`, updated `FieldErrorTemplate` and `FieldHelpTemplate`
 to use the `div` component for `FormHelperText`

---
 .../mui/src/FieldErrorTemplate/FieldErrorTemplate.tsx |  6 ++++--
 .../mui/src/FieldHelpTemplate/FieldHelpTemplate.tsx   |  6 +++++-
 packages/mui/test/__snapshots__/Array.test.tsx.snap   |  7 ++++---
 packages/mui/test/__snapshots__/Form.test.tsx.snap    | 11 ++++++-----
 4 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/mui/src/FieldErrorTemplate/FieldErrorTemplate.tsx b/packages/mui/src/FieldErrorTemplate/FieldErrorTemplate.tsx
index 12c11ae498..792b40c66c 100644
--- a/packages/mui/src/FieldErrorTemplate/FieldErrorTemplate.tsx
+++ b/packages/mui/src/FieldErrorTemplate/FieldErrorTemplate.tsx
@@ -19,11 +19,13 @@ export default function FieldErrorTemplate<
   const id = errorId<T>(idSchema);
 
   return (
-    <List dense={true} disablePadding={true}>
+    <List id={id} dense={true} disablePadding={true}>
       {errors.map((error, i: number) => {
         return (
           <ListItem key={i} disableGutters={true}>
-            <FormHelperText id={id}>{error}</FormHelperText>
+            <FormHelperText component='div' id={`${id}-${i}`}>
+              {error}
+            </FormHelperText>
           </ListItem>
         );
       })}
diff --git a/packages/mui/src/FieldHelpTemplate/FieldHelpTemplate.tsx b/packages/mui/src/FieldHelpTemplate/FieldHelpTemplate.tsx
index 16424b7b3c..94ba216136 100644
--- a/packages/mui/src/FieldHelpTemplate/FieldHelpTemplate.tsx
+++ b/packages/mui/src/FieldHelpTemplate/FieldHelpTemplate.tsx
@@ -15,5 +15,9 @@ export default function FieldHelpTemplate<
     return null;
   }
   const id = helpId<T>(idSchema);
-  return <FormHelperText id={id}>{help}</FormHelperText>;
+  return (
+    <FormHelperText component='div' id={id}>
+      {help}
+    </FormHelperText>
+  );
 }
diff --git a/packages/mui/test/__snapshots__/Array.test.tsx.snap b/packages/mui/test/__snapshots__/Array.test.tsx.snap
index 267cd09a2e..5ea20e10e8 100644
--- a/packages/mui/test/__snapshots__/Array.test.tsx.snap
+++ b/packages/mui/test/__snapshots__/Array.test.tsx.snap
@@ -4205,17 +4205,18 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
               </div>
               <ul
                 className="MuiList-root MuiList-dense emotion-19"
+                id="root_name__error"
               >
                 <li
                   className="MuiListItem-root MuiListItem-dense MuiListItem-padding emotion-20"
                   disabled={false}
                 >
-                  <p
+                  <div
                     className="MuiFormHelperText-root Mui-error MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-21"
-                    id="root_name__error"
+                    id="root_name__error-0"
                   >
                     Bad input
-                  </p>
+                  </div>
                 </li>
               </ul>
             </div>
diff --git a/packages/mui/test/__snapshots__/Form.test.tsx.snap b/packages/mui/test/__snapshots__/Form.test.tsx.snap
index d9f3442807..6f30727c57 100644
--- a/packages/mui/test/__snapshots__/Form.test.tsx.snap
+++ b/packages/mui/test/__snapshots__/Form.test.tsx.snap
@@ -4738,25 +4738,26 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-12:focus::-ms-input-
       </div>
       <ul
         className="MuiList-root MuiList-dense emotion-15"
+        id="root__error"
       >
         <li
           className="MuiListItem-root MuiListItem-dense MuiListItem-padding emotion-16"
           disabled={false}
         >
-          <p
+          <div
             className="MuiFormHelperText-root Mui-error MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-17"
-            id="root__error"
+            id="root__error-0"
           >
             an error
-          </p>
+          </div>
         </li>
       </ul>
-      <p
+      <div
         className="MuiFormHelperText-root Mui-error MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-17"
         id="root__help"
       >
         help me!
-      </p>
+      </div>
     </div>
   </div>
   <div