Merge pull request #8929 from marmelab/fix-datagrid-configurable-empt…

…y-child Fix `<DatagridConfigurable>` inspector hides the wrong column when using empty children
marmelab · May 22, 2023 · 2a71a6b · 2a71a6b
2 parents 28b11b2 + 9cd6b17
commit 2a71a6b
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 23 deletions.
diff --git a/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.spec.tsx b/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.spec.tsx
@@ -7,6 +7,7 @@ import {
     Omit,
     PreferenceKey,
     LabelElement,
+    NullChildren,
 } from './DatagridConfigurable.stories';
 
 describe('<DatagridConfigurable>', () => {
@@ -49,6 +50,19 @@ describe('<DatagridConfigurable>', () => {
         screen.getByLabelText('Title').click();
         expect(screen.queryByText('War and Peace')).not.toBeNull();
     });
+    it('accepts null children', async () => {
+        render(<NullChildren />);
+        screen.getByLabelText('Configure mode').click();
+        await screen.findByText('Inspector');
+        fireEvent.mouseOver(screen.getByText('Leo Tolstoy'));
+        await screen.getByTitle('ra.configurable.customize').click();
+        await screen.findByText('Datagrid');
+        expect(screen.queryByText('War and Peace')).not.toBeNull();
+        screen.getByLabelText('Original title').click();
+        expect(screen.queryByText('War and Peace')).toBeNull();
+        screen.getByLabelText('Original title').click();
+        expect(screen.queryByText('War and Peace')).not.toBeNull();
+    });
     it('should accept fields with no source', async () => {
         render(<Basic />);
         screen.getByLabelText('Configure mode').click();

diff --git a/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.stories.tsx b/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.stories.tsx
@@ -141,3 +141,20 @@ export const LabelElement = () => (
         </DatagridConfigurable>
     </Wrapper>
 );
+
+export const NullChildren = () => (
+    <Wrapper>
+        <DatagridConfigurable
+            resource="books1"
+            data={data}
+            sort={{ field: 'title', order: 'ASC' }}
+            bulkActionButtons={false}
+        >
+            {false && <TextField source="id" />}
+            <TextField source="title" label="Original title" />
+            <TextField source="author" />
+            <TextField source="year" />
+            <EditButton />
+        </DatagridConfigurable>
+    </Wrapper>
+);
diff --git a/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.tsx b/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.tsx
@@ -58,29 +58,23 @@ export const DatagridConfigurable = ({
 
     React.useEffect(() => {
         // first render, or the preference have been cleared
-        const columns = React.Children.map(props.children, (child, index) =>
-            React.isValidElement(child)
-                ? {
-                      index: String(index),
-                      source: child.props.source,
-                      label:
-                          child.props.label &&
-                          typeof child.props.label === 'string' // this list is serializable, so we can't store ReactElement in it
-                              ? child.props.label
-                              : child.props.source
-                              ? //  force the label to be the source
-                                undefined
-                              : // no source or label, generate a label
-                                translate(
-                                    'ra.configurable.Datagrid.unlabeled',
-                                    {
-                                        column: index,
-                                        _: `Unlabeled column #%{column}`,
-                                    }
-                                ),
-                  }
-                : null
-        ).filter(column => column != null);
+        const columns = React.Children.toArray(props.children)
+            .filter(child => React.isValidElement(child))
+            .map((child: React.ReactElement, index) => ({
+                index: String(index),
+                source: child.props.source,
+                label:
+                    child.props.label && typeof child.props.label === 'string' // this list is serializable, so we can't store ReactElement in it
+                        ? child.props.label
+                        : child.props.source
+                        ? //  force the label to be the source
+                          undefined
+                        : // no source or label, generate a label
+                          translate('ra.configurable.Datagrid.unlabeled', {
+                              column: index,
+                              _: `Unlabeled column #%{column}`,
+                          }),
+            }));
         if (columns.length !== availableColumns.length) {
             setAvailableColumns(columns);
             setOmit(omit);