From 4f116c22f16e79e1b299083e7cb7b46b0ff25253 Mon Sep 17 00:00:00 2001
From: Gildas <1122076+djhi@users.noreply.github.com>
Date: Fri, 1 Aug 2025 17:27:35 +0200
Subject: [PATCH] Fix `ChipField` consider zero to be empty

---
 .../src/field/ChipField.spec.tsx              | 52 +++++++++++--------
 .../src/field/ChipField.stories.tsx           |  3 +-
 .../ra-ui-materialui/src/field/ChipField.tsx  |  2 +-
 3 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/packages/ra-ui-materialui/src/field/ChipField.spec.tsx b/packages/ra-ui-materialui/src/field/ChipField.spec.tsx
index df2c4dd2253..7526b3e0102 100644
--- a/packages/ra-ui-materialui/src/field/ChipField.spec.tsx
+++ b/packages/ra-ui-materialui/src/field/ChipField.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import expect from 'expect';
 import { ChipField } from './ChipField';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { RecordContextProvider, I18nContextProvider } from 'ra-core';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 
@@ -25,49 +25,59 @@ const i18nProvider = polyglotI18nProvider(
 );
 
 describe('<ChipField />', () => {
-    it('should display the record value added as source', () => {
-        const { getByText } = render(
-            <ChipField source="name" record={{ id: 123, name: 'foo' }} />
-        );
-        expect(getByText('foo')).not.toBeNull();
+    it('should display the record value added as source', async () => {
+        render(<ChipField source="name" record={{ id: 123, name: 'foo' }} />);
+        await screen.findByText('foo');
     });
 
-    it('should use record from RecordContext', () => {
-        const { getByText } = render(
+    it('should use record from RecordContext', async () => {
+        render(
             <RecordContextProvider value={{ id: 123, name: 'foo' }}>
                 <ChipField source="name" />
             </RecordContextProvider>
         );
-        expect(getByText('foo')).not.toBeNull();
+        await screen.findByText('foo');
     });
 
-    it('should not display any label added as props', () => {
-        const { getByText } = render(
+    it('should not display any label added as props', async () => {
+        render(
             <ChipField
                 source="name"
                 record={{ id: 123, name: 'foo' }}
                 label="bar"
             />
         );
-        expect(getByText('foo')).not.toBeNull();
+        await screen.findByText('foo');
     });
 
     it.each([null, undefined])(
         'should render the emptyText when value is %s',
-        name => {
-            const { getByText } = render(
+        async name => {
+            render(
                 <ChipField
                     source="name"
                     record={{ id: 123, name }}
                     emptyText="NA"
                 />
             );
-            expect(getByText('NA')).not.toBeNull();
+            await screen.findByText('NA');
         }
     );
 
-    it('should translate emptyText', () => {
-        const { getByText } = render(
+    it('should not render the emptyText when value is zero', async () => {
+        render(
+            <ChipField
+                source="name"
+                record={{ id: 123, name: 0 }}
+                emptyText="NA"
+            />
+        );
+
+        expect(screen.queryByText('NA')).toBeNull();
+    });
+
+    it('should translate emptyText', async () => {
+        render(
             <I18nContextProvider value={i18nProvider}>
                 <ChipField
                     record={{ id: 123 }}
@@ -78,7 +88,7 @@ describe('<ChipField />', () => {
             </I18nContextProvider>
         );
 
-        expect(getByText('Not found')).not.toBeNull();
+        await screen.findByText('Not found');
     });
 
     it('should return null when value and emptyText are an empty string', () => {
@@ -92,15 +102,15 @@ describe('<ChipField />', () => {
         expect(container.firstChild).toBeNull();
     });
 
-    it('should display the emptyText when value is an empty string', () => {
-        const { getByText } = render(
+    it('should display the emptyText when value is an empty string', async () => {
+        render(
             <ChipField
                 source="name"
                 record={{ id: 123, name: '' }}
                 emptyText="NA"
             />
         );
-        expect(getByText('NA')).not.toBeNull();
+        await screen.findByText('NA');
     });
 
     it('should return null when value is an empty string and emptyText is null', () => {
diff --git a/packages/ra-ui-materialui/src/field/ChipField.stories.tsx b/packages/ra-ui-materialui/src/field/ChipField.stories.tsx
index 18bc9f10fc5..0e05cff96c6 100644
--- a/packages/ra-ui-materialui/src/field/ChipField.stories.tsx
+++ b/packages/ra-ui-materialui/src/field/ChipField.stories.tsx
@@ -27,10 +27,11 @@ export const Basic = ({
 
 Basic.argTypes = {
     value: {
-        options: ['filled', 'empty', 'undefined'],
+        options: ['filled', 'empty', 'zero', 'undefined'],
         mapping: {
             filled: 'Bazinga',
             empty: '',
+            zero: 0,
             undefined: undefined,
         },
         control: { type: 'select' },
diff --git a/packages/ra-ui-materialui/src/field/ChipField.tsx b/packages/ra-ui-materialui/src/field/ChipField.tsx
index 149e2ba0a13..9af7a46dd29 100644
--- a/packages/ra-ui-materialui/src/field/ChipField.tsx
+++ b/packages/ra-ui-materialui/src/field/ChipField.tsx
@@ -25,7 +25,7 @@ const ChipFieldImpl = <
     const value = useFieldValue(props);
     const translate = useTranslate();
 
-    if (!value) {
+    if (value == null || value === '') {
         if (!emptyText || emptyText.length === 0) {
             return null;
         }