Merge pull request #11003 from marmelab/fix-autocomplete-input-chips

Fix `<AutocompleteArrayInput>` does not apply `ChipProps` nor `slotProps.chip` in `renderTags`

Author: slax57

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

@@ -13,13 +13,15 @@ import { SimpleForm } from '../form';
 import { AutocompleteArrayInput } from './AutocompleteArrayInput';
 import { useCreateSuggestionContext } from './useSupportCreateSuggestion';
 import {
+    ChipProps,
     CreateItemLabel,
     CreateItemLabelRendered,
     CreateLabel,
     InsideReferenceArrayInput,
     InsideReferenceArrayInputOnChange,
     OnChange,
     OnCreate,
+    SlotPropsChip,
 } from './AutocompleteArrayInput.stories';
 
 describe('<AutocompleteArrayInput />', () => {
@@ -1326,4 +1328,12 @@ describe('<AutocompleteArrayInput />', () => {
         expect(input.value).not.toBe('Create x');
         expect(input.value).toBe('');
     }, 10000);
+    it('should allow to customize chips using the ChipProps prop', async () => {
+        render(<ChipProps />);
+        await screen.findAllByTestId('delete-icon');
+    });
+    it('should allow to customize chips using the slotProps prop', async () => {
+        render(<SlotPropsChip />);
+        await screen.findAllByTestId('delete-icon');
+    });
 });

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Admin } from 'react-admin';
 
 import CloseIcon from '@mui/icons-material/Close';
+import BackspaceIcon from '@mui/icons-material/Backspace';
 import {
     Button,
     Chip,
@@ -780,3 +781,40 @@ export const InsideReferenceArrayInputWithCreationSupport = () => (
         </Admin>
     </TestMemoryRouter>
 );
+
+export const ChipProps = () => (
+    <Wrapper>
+        <AutocompleteArrayInput
+            source="roles"
+            choices={[
+                { id: 'admin', name: 'Admin' },
+                { id: 'u001', name: 'Editor' },
+                { id: 'u002', name: 'Moderator' },
+                { id: 'u003', name: 'Reviewer' },
+            ]}
+            ChipProps={{
+                deleteIcon: <BackspaceIcon data-testid="delete-icon" />,
+            }}
+        />
+    </Wrapper>
+);
+
+export const SlotPropsChip = () => (
+    <Wrapper>
+        <AutocompleteArrayInput
+            source="roles"
+            choices={[
+                { id: 'admin', name: 'Admin' },
+                { id: 'u001', name: 'Editor' },
+                { id: 'u002', name: 'Moderator' },
+                { id: 'u003', name: 'Reviewer' },
+            ]}
+            slotProps={{
+                // @ts-ignore
+                chip: {
+                    deleteIcon: <BackspaceIcon data-testid="delete-icon" />,
+                },
+            }}
+        />
+    </Wrapper>
+);

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

@@ -726,6 +726,11 @@ If you provided a React element for the optionText prop, you must also provide t
                     value.map((option, index) => {
                         // We have to extract the key because react 19 does not allow to spread the key prop
                         const { key, ...tagProps } = getTagProps({ index });
+                        // @ts-expect-error slotProps do not yet exist in MUI v5
+                        const mergedSlotProps = props.slotProps?.chip
+                            ? // @ts-expect-error slotProps do not yet exist in MUI v5
+                              props.slotProps.chip
+                            : props.ChipProps;
                         return (
                             <Chip
                                 label={
@@ -738,6 +743,7 @@ If you provided a React element for the optionText prop, you must also provide t
                                 size="small"
                                 key={key}
                                 {...tagProps}
+                                {...mergedSlotProps}
                             />
                         );
                     })