Merge pull request #5312 from WiXSL/fix-optional-first-tab

Fix TabbedShowLayout resolves path incorrectly if first tab is null

Author: fzaninotto

packages/ra-ui-materialui/src/detail/TabbedShowLayout.js

@@ -87,16 +87,18 @@ const TabbedShowLayout = props => {
         ...rest
     } = props;
     const match = useRouteMatch();
-
     const classes = useStyles(props);
+    const nonNullChildren = Children.toArray(children).filter(
+        child => child !== null
+    );
 
     return (
         <div className={className} key={version} {...sanitizeRestProps(rest)}>
-            {cloneElement(tabs, {}, children)}
+            {cloneElement(tabs, {}, nonNullChildren)}
 
             <Divider />
             <div className={classes.content}>
-                {Children.map(children, (tab, index) =>
+                {Children.map(nonNullChildren, (tab, index) =>
                     tab && isValidElement(tab) ? (
                         <Route
                             exact

packages/ra-ui-materialui/src/detail/TabbedShowLayout.spec.js

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import expect from 'expect';
+import { cleanup, render } from '@testing-library/react';
+
+import TabbedShowLayout from './TabbedShowLayout';
+import Tab from './Tab';
+import TextField from '../field/TextField';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
+
+describe('<TabbedShowLayout />', () => {
+    afterEach(cleanup);
+
+    const renderWithRouter = children => {
+        const history = createMemoryHistory();
+
+        return {
+            history,
+            ...render(<Router history={history}>{children}</Router>),
+        };
+    };
+
+    it('should display the first Tab component and its content', () => {
+        const { queryByText, history } = renderWithRouter(
+            <TabbedShowLayout basePath="/" record={{ id: 123 }} resource="foo">
+                <Tab label="Tab1">
+                    <TextField label="Field On Tab1" source="field1" />
+                </Tab>
+                <Tab label="Tab2">
+                    <TextField label="Field On Tab2" source="field2" />
+                </Tab>
+            </TabbedShowLayout>
+        );
+
+        expect(queryByText('Tab1')).not.toBeNull();
+        expect(queryByText('Field On Tab1')).not.toBeNull();
+    });
+
+    it('should display the first valid Tab component and its content', () => {
+        const { queryByText, history } = renderWithRouter(
+            <TabbedShowLayout basePath="/" record={{ id: 123 }} resource="foo">
+                {null}
+                <Tab label="Tab1">
+                    <TextField label="Field On Tab1" source="field1" />
+                </Tab>
+                <Tab label="Tab2">
+                    <TextField label="Field On Tab2" source="field2" />
+                </Tab>
+            </TabbedShowLayout>
+        );
+
+        expect(queryByText('Tab1')).not.toBeNull();
+        expect(queryByText('Field On Tab1')).not.toBeNull();
+    });
+});