Referenced items won't be selected when IDs type differ in <ReferenceArrayInput> and <AutoCompleteInput>

packages/ra-ui-materialui/src/field/ReferenceArrayField.stories.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import fakeRestProvider from 'ra-data-fakerest';
+
+import { AdminContext } from '../AdminContext';
+import { Datagrid, List } from '../list';
+import { ReferenceArrayField } from './ReferenceArrayField';
+import { TextField } from './TextField';
+
+const fakeData = {
+    bands: [{ id: 1, name: 'band_1', members: [1, '2', '3'] }],
+    artists: [
+        { id: 1, name: 'artist_1' },
+        { id: 2, name: 'artist_2' },
+        { id: 3, name: 'artist_3' },
+        { id: 4, name: 'artist_4' },
+    ],
+};
+const dataProvider = fakeRestProvider(fakeData, true);
+
+export default { title: 'ra-ui-materialui/fields/ReferenceArrayField' };
+
+export const HandlingIdsDiscrependies = () => {
+    return (
+        <AdminContext dataProvider={dataProvider}>
+            <List resource="bands" sx={{ width: 600 }}>
+                <Datagrid>
+                    <TextField source="name" fullWidth />
+                    <ReferenceArrayField
+                        fullWidth
+                        source="members"
+                        reference="artists"
+                    >
+                        <Datagrid>
+                            <TextField source="id" />
+                            <TextField source="name" />
+                        </Datagrid>
+                    </ReferenceArrayField>
+                </Datagrid>
+            </List>
+        </AdminContext>
+    );
+};

packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import expect from 'expect';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {
@@ -17,6 +18,7 @@ import {
     InsideReferenceInput,
     InsideReferenceInputDefaultValue,
     Nullable,
+    NullishValuesHandling,
     VeryLargeOptionsNumber,
 } from './AutocompleteInput.stories';
 import { act } from '@testing-library/react-hooks';
@@ -1477,4 +1479,24 @@ describe('<AutocompleteInput />', () => {
             expect(input.value).toEqual('');
         });
     });
+
+    it.only('should handle nullish values', async () => {
+        render(<NullishValuesHandling />);
+
+        const checkInputValue = async (label: string, expected: any) => {
+            const input = (await screen.findByLabelText(
+                label
+            )) as HTMLInputElement;
+            await waitFor(() => {
+                expect(input.value).toStrictEqual(expected);
+            });
+        };
+
+        await checkInputValue('prefers_empty-string', '');
+        await checkInputValue('prefers_null', '');
+        await checkInputValue('prefers_undefined', '');
+        await checkInputValue('prefers_zero-string', '0');
+        await checkInputValue('prefers_zero-number', '0');
+        await checkInputValue('prefers_valid-value', '1');
+    });
 });

packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx

@@ -1,16 +1,25 @@
 import * as React from 'react';
-import { Admin, AdminContext } from 'react-admin';
-import { Resource, required, useCreate, useRecordContext } from 'ra-core';
+import { Admin, AdminContext, Datagrid, DatagridBody, List } from 'react-admin';
+import {
+    Resource,
+    required,
+    useCreate,
+    useRecordContext,
+    RecordContextProvider,
+} from 'ra-core';
 import { createMemoryHistory } from 'history';
 import {
     Dialog,
     DialogContent,
-    TextField,
     DialogActions,
     Button,
     Stack,
+    TextField,
     Typography,
+    TableRow,
+    TableCell,
 } from '@mui/material';
+import fakeRestProvider from 'ra-data-fakerest';
 
 import { Edit } from '../detail';
 import { SimpleForm } from '../form';
@@ -791,3 +800,74 @@ export const EmptyText = () => (
         <Resource name="books" edit={BookEditWithEmptyText} />
     </Admin>
 );
+
+const nullishValuesFakeData = {
+    fans: [
+        { id: 'null', name: 'null', prefers: null },
+        { id: 'undefined', name: 'undefined', prefers: undefined },
+        { id: 'empty-string', name: 'empty string', prefers: '' },
+        { id: 'zero-string', name: '0', prefers: 0 },
+        { id: 'zero-number', name: '0', prefers: '0' },
+        { id: 'valid-value', name: '1', prefers: 1 },
+    ],
+    artists: [{ id: 0 }, { id: 1 }],
+};
+
+const NullishValuesDatagridRow = props => {
+    const { record, id } = props;
+    return (
+        <RecordContextProvider value={record}>
+            <TableRow>
+                <TableCell>
+                    <span>
+                        <b>Fan #{record.id}</b>
+                        <br />
+                        <code>{record.name}</code> [
+                        <code>{typeof record.prefers}</code>]
+                    </span>
+                </TableCell>
+                <TableCell>
+                    <SimpleForm toolbar={<></>}>
+                        <AutocompleteInput
+                            id={`prefers_${id}`}
+                            label={`prefers_${id}`}
+                            fullWidth
+                            source="prefers"
+                            optionText={option => option.id}
+                            choices={nullishValuesFakeData.artists}
+                            helperText={false}
+                        />
+                    </SimpleForm>
+                </TableCell>
+            </TableRow>
+        </RecordContextProvider>
+    );
+};
+const NullishValuesDatagridBody = props => (
+    <DatagridBody {...props} row={<NullishValuesDatagridRow />} />
+);
+
+export const NullishValuesHandling = () => {
+    return (
+        <AdminContext
+            dataProvider={fakeRestProvider(nullishValuesFakeData, false)}
+        >
+            <Typography variant="h6" gutterBottom>
+                Test nullish values
+            </Typography>
+            <Typography variant="body2">
+                Story demonstrates the handling of nullish values ; here listed
+                fans specify a prefered artist. <code>prefer</code> value is
+                evaluated again artists IDs.
+            </Typography>
+            <List resource="fans" actions={<></>}>
+                <Datagrid
+                    body={<NullishValuesDatagridBody />}
+                    bulkActionButtons={false}
+                >
+                    <></>
+                </Datagrid>
+            </List>
+        </AdminContext>
+    );
+};

packages/ra-ui-materialui/src/input/AutocompleteInput.tsx

@@ -525,7 +525,10 @@ If you provided a React element for the optionText prop, you must also provide t
     ]);
 
     const isOptionEqualToValue = (option, value) => {
-        return getChoiceValue(option) === getChoiceValue(value);
+        return (
+            getChoiceValue(option).toString() ===
+            getChoiceValue(value).toString()
+        );
     };
 
     return (
@@ -740,11 +743,18 @@ const getSelectedItems = (
     if (multiple) {
         return (value || [])
             .map(item =>
-                choices.find(choice => item === get(choice, optionValue))
+                choices.find(
+                    choice =>
+                        item?.toString() === get(choice, optionValue).toString()
+                )
             )
             .filter(item => !!item);
     }
-    return choices.find(choice => get(choice, optionValue) === value) || '';
+    return (
+        choices.find(
+            choice => get(choice, optionValue).toString() === value.toString()
+        ) || ''
+    );
 };
 
 const DefaultFilterToQuery = searchText => ({ q: searchText });

packages/ra-ui-materialui/src/input/ReferenceArrayInput.spec.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import expect from 'expect';
 import {
     render,
     screen,
@@ -21,6 +22,7 @@ import { DatagridInput } from './DatagridInput';
 import { TextField } from '../field';
 import { ReferenceArrayInput } from './ReferenceArrayInput';
 import { SelectArrayInput } from './SelectArrayInput';
+import { HandlingTypesDiscrepencies } from './ReferenceArrayInput.stories';
 
 describe('<ReferenceArrayInput />', () => {
     const defaultProps = {
@@ -85,7 +87,10 @@ describe('<ReferenceArrayInput />', () => {
         const dataProvider = testDataProvider({
             getList: () =>
                 // @ts-ignore
-                Promise.resolve({ data: [{ id: 1 }, { id: 2 }], total: 2 }),
+                Promise.resolve({
+                    data: [{ id: 1 }, { id: 2 }],
+                    total: 2,
+                }),
         });
         render(
             <AdminContext dataProvider={dataProvider}>
@@ -187,32 +192,32 @@ describe('<ReferenceArrayInput />', () => {
                 .querySelector('input');
 
         await waitFor(() => {
-            expect(getCheckbox1().checked).toEqual(true);
-            expect(getCheckbox2().checked).toEqual(false);
+            expect(getCheckbox1()?.checked).toEqual(true);
+            expect(getCheckbox2()?.checked).toEqual(false);
         });
 
         fireEvent.click(getCheckbox2());
 
         await waitFor(() => {
-            expect(getCheckbox1().checked).toEqual(true);
-            expect(getCheckbox2().checked).toEqual(true);
-            expect(getCheckboxAll().checked).toEqual(true);
+            expect(getCheckbox1()?.checked).toEqual(true);
+            expect(getCheckbox2()?.checked).toEqual(true);
+            expect(getCheckboxAll()?.checked).toEqual(true);
         });
 
         fireEvent.click(getCheckboxAll());
 
         await waitFor(() => {
-            expect(getCheckbox1().checked).toEqual(false);
-            expect(getCheckbox2().checked).toEqual(false);
-            expect(getCheckboxAll().checked).toEqual(false);
+            expect(getCheckbox1()?.checked).toEqual(false);
+            expect(getCheckbox2()?.checked).toEqual(false);
+            expect(getCheckboxAll()?.checked).toEqual(false);
         });
 
         fireEvent.click(getCheckboxAll());
 
         await waitFor(() => {
-            expect(getCheckbox1().checked).toEqual(true);
-            expect(getCheckbox2().checked).toEqual(true);
-            expect(getCheckboxAll().checked).toEqual(true);
+            expect(getCheckbox1()?.checked).toEqual(true);
+            expect(getCheckbox2()?.checked).toEqual(true);
+            expect(getCheckboxAll()?.checked).toEqual(true);
         });
     });
 
@@ -244,4 +249,52 @@ describe('<ReferenceArrayInput />', () => {
             });
         });
     });
+
+    it('should show selected values when ids type are inconsistant', async () => {
+        render(<HandlingTypesDiscrepencies />);
+        await waitFor(() => {
+            expect(
+                screen.queryByText('#1', {
+                    selector: 'div.MuiChip-root .MuiChip-label',
+                })
+            ).not.toBeNull();
+        });
+        expect(
+            screen.queryByText('#2', {
+                selector: 'div.MuiChip-root .MuiChip-label',
+            })
+        ).not.toBeNull();
+        expect(
+            screen.queryByText('artist_3', { selector: 'div.MuiChip-root' })
+        ).toBeNull();
+    });
+
+    it('should unselect a value whose id type is inconsistant', async () => {
+        render(<HandlingTypesDiscrepencies />);
+
+        const unselect = (queriedText: string) => () => {
+            const chip = screen.queryByText(queriedText, {
+                selector: '.MuiChip-label',
+            })?.nextSibling;
+            fireEvent.click(chip);
+        };
+
+        await waitFor(unselect('#1'));
+        await waitFor(unselect('#2'));
+
+        await waitFor(() => {
+            expect(
+                screen.queryByText('#1', {
+                    selector: '.MuiChip-label',
+                })
+            ).toBeNull();
+        });
+        await waitFor(() => {
+            expect(
+                screen.queryByText('#2', {
+                    selector: '.MuiChip-label',
+                })
+            ).toBeNull();
+        });
+    });
 });