Fix: Change FormHelperText usage with @mui/material to render divs

Fixes rjsf-team#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`
heath-freenome · Jan 8, 2024 · 7457810 · 7457810
1 parent 8c685b7
commit 7457810
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,7 +15,7 @@ it according to semantic versioning. For example, if your PR adds a breaking cha
 should change the heading of the (upcoming) version to include a major version bump.
 
 -->
-# 5.15.3
+# 5.16.0
 
 ## @rjsf/utils
 
@@ -34,6 +34,10 @@ should change the heading of the (upcoming) version to include a major version b
 
 - Removed `dateElementProps` function implementation, and replaced it with `getDateElementProps` from `@rjsf/utils`.
 
+## @rjsf/mui
+
+- Fixed the `FieldErrorTemplate` and `FieldHelpTemplate` to support html-based errors that cause `<xxxx> cannot appear as a descendant of <p>` browser warnings, fixing [#4031](https://github.com/rjsf-team/react-jsonschema-form/issues/4031)
+
 ## Dev / docs / playground
 
 - Updated docs and playground with the implementation guide of newly added date re-order feature.

diff --git 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
@@ -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
@@ -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
@@ -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