Merge pull request #11042 from marmelab/fix-referencefieldbase

Fix ReferenceFieldBase considers zero-index reference as empty

Author: djhi

packages/ra-core/src/controller/field/ReferenceFieldBase.spec.tsx

@@ -12,6 +12,7 @@ import {
     Meta,
     Offline,
     WithRenderProp,
+    ZeroIndex,
 } from './ReferenceFieldBase.stories';
 import { RecordContextProvider } from '../record';
 import { onlineManager } from '@tanstack/react-query';
@@ -184,4 +185,11 @@ describe('<ReferenceFieldBase />', () => {
         await screen.findByText('You are offline, the data may be outdated');
         await screen.findByText('Leo');
     });
+
+    it('should not render the empty component for zero-index ids', async () => {
+        render(<ZeroIndex />);
+        await waitFor(() => {
+            expect(screen.queryByText('Leo')).not.toBeNull();
+        });
+    });
 });

packages/ra-core/src/controller/field/ReferenceFieldBase.stories.tsx

@@ -268,18 +268,16 @@ export const QueryOptions = () => (
 const BookShowMeta = () => {
     return (
         <ShowBase>
-            <>
-                <TextField source="title" />
-                <ReferenceFieldBase
-                    reference="authors"
-                    source="author"
-                    queryOptions={{ meta: { test: true } }}
-                >
-                    <MyReferenceField>
-                        <TextField source="last_name" />
-                    </MyReferenceField>
-                </ReferenceFieldBase>
-            </>
+            <TextField source="title" />
+            <ReferenceFieldBase
+                reference="authors"
+                source="author"
+                queryOptions={{ meta: { test: true } }}
+            >
+                <MyReferenceField>
+                    <TextField source="last_name" />
+                </MyReferenceField>
+            </ReferenceFieldBase>
         </ShowBase>
     );
 };
@@ -397,6 +395,39 @@ export const WithRenderProp = ({ dataProvider = dataProviderWithAuthors }) => (
     </TestMemoryRouter>
 );
 
+export const ZeroIndex = ({
+    dataProvider = fakeRestDataProvider(
+        {
+            books: [{ id: 1, title: 'War and Peace', author: 0 }],
+            authors: [{ id: 0, first_name: 'Leo', last_name: 'Tolstoy' }],
+        },
+        process.env.NODE_ENV === 'development'
+    ),
+}: {
+    dataProvider?: DataProvider;
+}) => (
+    <TestMemoryRouter initialEntries={['/books/1/show']}>
+        <CoreAdmin dataProvider={dataProvider}>
+            <Resource
+                name="books"
+                show={() => (
+                    <ShowBase>
+                        <TextField source="title" />
+                        <ReferenceFieldBase
+                            reference="authors"
+                            source="author"
+                            empty={<>Should not appear</>}
+                        >
+                            <TextField source="first_name" />
+                            <TextField source="last_name" />
+                        </ReferenceFieldBase>
+                    </ShowBase>
+                )}
+            />
+        </CoreAdmin>
+    </TestMemoryRouter>
+);
+
 export const Offline = () => {
     return (
         <TestMemoryRouter initialEntries={['/books/1/show']}>

packages/ra-core/src/controller/field/ReferenceFieldBase.tsx

@@ -77,7 +77,7 @@ export const ReferenceFieldBase = <
         !!controllerError && error !== false && error !== undefined;
     const shouldRenderEmpty =
         !isPaused &&
-        (!id ||
+        (id == null ||
             (!referenceRecord &&
                 !controllerError &&
                 !isPending &&