fix: remove mui/material-ui ArrayFieldTemplate grid wrapper (#3864)

* fix: remove mui/material-ui ArrayFieldTemplate grid wrapper * chore: update changelog with @rjsf/mui and @rjsf/material-ui fixes Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com> --------- Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com> Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com>
rjsf-team · Oct 5, 2023 · 6157bd9 · 6157bd9
1 parent 393826e
commit 6157bd9
Show file tree

Hide file tree

Showing 5 changed files with 7,060 additions and 7,416 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,14 @@ should change the heading of the (upcoming) version to include a major version b
 -->
 # 5.13.1
 
+## @rjsf/mui
+
+- Removed an unnecessary `Grid` container component in the `ArrayFieldTemplate` component that wrapped the `ArrayFieldItemTemplate`, fixing [#3863](https://github.com/rjsf-team/react-jsonschema-form/issues/3863)
+
+## @rjsf/material-ui
+
+- Removed an unnecessary `Grid` container component in the `ArrayFieldTemplate` component that wrapped the `ArrayFieldItemTemplate`, fixing [#3863](https://github.com/rjsf-team/react-jsonschema-form/issues/3863)
+
 ## @rjsf/utils
 
 - Added `getOptionMatchingSimpleDiscriminator()` function

diff --git a/packages/material-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/material-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -60,27 +60,25 @@ export default function ArrayFieldTemplate<
           uiSchema={uiSchema}
           registry={registry}
         />
-        <Grid container={true} key={`array-item-list-${idSchema.$id}`}>
-          {items &&
-            items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
-              <ArrayFieldItemTemplate key={key} {...itemProps} />
-            ))}
-          {canAdd && (
-            <Grid container justifyContent='flex-end'>
-              <Grid item={true}>
-                <Box mt={2}>
-                  <AddButton
-                    className='array-item-add'
-                    onClick={onAddClick}
-                    disabled={disabled || readonly}
-                    uiSchema={uiSchema}
-                    registry={registry}
-                  />
-                </Box>
-              </Grid>
+        {items &&
+          items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+            <ArrayFieldItemTemplate key={key} {...itemProps} />
+          ))}
+        {canAdd && (
+          <Grid container justifyContent='flex-end'>
+            <Grid item={true}>
+              <Box mt={2}>
+                <AddButton
+                  className='array-item-add'
+                  onClick={onAddClick}
+                  disabled={disabled || readonly}
+                  uiSchema={uiSchema}
+                  registry={registry}
+                />
+              </Box>
             </Grid>
-          )}
-        </Grid>
+          </Grid>
+        )}
       </Box>
     </Paper>
   );