Fix 4772 by always generating the outer grid regardless of the number of properties (#4775)

Fixed #4772 by always genering the outer grid
- Updated `chakra-ui`'s `ObjectFieldTemplate` to render the outer `Grid` regardless of the number of properties
- Updated the `CHANGELOG.md` accordingly

Author: heath-freenome

CHANGELOG.md

@@ -17,6 +17,10 @@ should change the heading of the (upcoming) version to include a major version b
 -->
 # 6.0.0-beta.17
 
+## @rjsf/chakra-ui
+
+- Updated `ObjectFieldTemplate` to always generate the "Add" button when `canExpand()` is true, fixing [#4772](https://github.com/rjsf-team/react-jsonschema-form/issues/4772)
+
 ## @rjsf/core
 
 - Updated `ObjectField` to remove the `name` from the path passed to `onChange()` callback in `handleAddClick()` and `onDropPropertyClick()`, fixing [#4763](https://github.com/rjsf-team/react-jsonschema-form/issues/4763)

packages/chakra-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -64,29 +64,27 @@ export default function ObjectFieldTemplate<
           registry={registry}
         />
       )}
-      {properties.length > 0 && (
-        <Grid gap={description ? 2 : 6} mb={4}>
-          {properties.map((element, index) =>
-            element.hidden ? (
-              element.content
-            ) : (
-              <GridItem key={`${idSchema.$id}-${element.name}-${index}`}>{element.content}</GridItem>
-            ),
-          )}
-          {canExpand<T, S, F>(schema, uiSchema, formData) && (
-            <GridItem justifySelf='flex-end'>
-              <AddButton
-                id={buttonId<T>(idSchema, 'add')}
-                className='rjsf-object-property-expand'
-                onClick={onAddClick(schema)}
-                disabled={disabled || readonly}
-                uiSchema={uiSchema}
-                registry={registry}
-              />
-            </GridItem>
-          )}
-        </Grid>
-      )}
+      <Grid gap={description ? 2 : 6} mb={4}>
+        {properties.map((element, index) =>
+          element.hidden ? (
+            element.content
+          ) : (
+            <GridItem key={`${idSchema.$id}-${element.name}-${index}`}>{element.content}</GridItem>
+          ),
+        )}
+        {canExpand<T, S, F>(schema, uiSchema, formData) && (
+          <GridItem justifySelf='flex-end'>
+            <AddButton
+              id={buttonId<T>(idSchema, 'add')}
+              className='rjsf-object-property-expand'
+              onClick={onAddClick(schema)}
+              disabled={disabled || readonly}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          </GridItem>
+        )}
+      </Grid>
     </>
   );
 }