diff --git a/packages/ra-ui-materialui/src/field/ArrayField.spec.tsx b/packages/ra-ui-materialui/src/field/ArrayField.spec.tsx
index 98258779526..d82345d2ad2 100644
--- a/packages/ra-ui-materialui/src/field/ArrayField.spec.tsx
+++ b/packages/ra-ui-materialui/src/field/ArrayField.spec.tsx
@@ -6,6 +6,7 @@ import ArrayField from './ArrayField';
 import NumberField from './NumberField';
 import TextField from './TextField';
 import Datagrid from '../list/datagrid/Datagrid';
+import SimpleList from '../list/SimpleList';
 
 describe('<ArrayField />', () => {
     const currentSort = { field: 'id', order: 'ASC' };
@@ -27,7 +28,27 @@ describe('<ArrayField />', () => {
         );
     });
 
-    it('should render the underlying iterator component', () => {
+    it('should render the alternative empty component', () => {
+        const { queryByText } = render(
+            <TestContext>
+                <ArrayField
+                    source="arr"
+                    resource="posts"
+                    record={{
+                        id: 123,
+                        arr: [],
+                    }}
+                >
+                    <Datagrid empty={<div>No posts</div>}>
+                        <NumberField source="id" />
+                    </Datagrid>
+                </ArrayField>
+            </TestContext>
+        );
+        expect(queryByText('No posts')).not.toBeNull();
+    });
+
+    it('should render the <Datagrid> iterator component', () => {
         const { queryByText } = render(
             <TestContext>
                 <ArrayField
@@ -58,7 +79,7 @@ describe('<ArrayField />', () => {
         expect(queryByText('456')).not.toBeNull();
     });
 
-    it('should render the alternative empty component', () => {
+    it('should render the <SimpleList> iterator component', () => {
         const { queryByText } = render(
             <TestContext>
                 <ArrayField
@@ -66,15 +87,25 @@ describe('<ArrayField />', () => {
                     resource="posts"
                     record={{
                         id: 123,
-                        arr: [],
+                        arr: [
+                            { id: 123, foo: 'bar' },
+                            { id: 456, foo: 'baz' },
+                        ],
                     }}
                 >
-                    <Datagrid empty={<div>No posts</div>}>
-                        <NumberField source="id" />
-                    </Datagrid>
+                    <SimpleList
+                        primaryText={record => record.foo}
+                        secondaryText={record => record.id}
+                    />
                 </ArrayField>
             </TestContext>
         );
-        expect(queryByText('No posts')).not.toBeNull();
+
+        // Test the fields values
+        expect(queryByText('bar')).not.toBeNull();
+        expect(queryByText('123')).not.toBeNull();
+
+        expect(queryByText('baz')).not.toBeNull();
+        expect(queryByText('456')).not.toBeNull();
     });
 });
diff --git a/packages/ra-ui-materialui/src/field/ArrayField.tsx b/packages/ra-ui-materialui/src/field/ArrayField.tsx
index c25131b1c53..bf44224231f 100644
--- a/packages/ra-ui-materialui/src/field/ArrayField.tsx
+++ b/packages/ra-ui-materialui/src/field/ArrayField.tsx
@@ -165,7 +165,7 @@ export const ArrayField: FC<ArrayFieldProps> = memo(props => {
                 setPerPage: null,
                 setSort: null,
                 showFilter: null,
-                total: null,
+                total: ids.length,
             }}
         >
             {cloneElement(Children.only(children), {