Chore(ArrayField): add support for storeKey to manage independent selection states

docs/ArrayField.md

@@ -71,12 +71,13 @@ const PostShow = () => (
 
 ## Props
 
-| Prop       | Required | Type              | Default | Description                              |
-|------------|----------|-------------------|---------|------------------------------------------|
-| `children` | Required | `ReactNode`       |         | The component to render the list.        |
-| `filter`   | Optional | `object`          |         | The filter to apply to the list.         |
-| `perPage`  | Optional | `number`          | 1000    | The number of items to display per page. |
-| `sort`     | Optional | `{ field, order}` |         | The sort to apply to the list.           |
+| Prop       | Required | Type              | Default | Description                                        |
+|------------|----------|-------------------|---------|----------------------------------------------------|
+| `children` | Required | `ReactNode`       |         | The component to render the list.                  |
+| `filter`   | Optional | `object`          |         | The filter to apply to the list.                   |
+| `perPage`  | Optional | `number`          | 1000    | The number of items to display per page.           |
+| `sort`     | Optional | `{ field, order}` |         | The sort to apply to the list.                     |
+| `storeKey` | Optional | `string`          |         | The key to use to store the records selection state|
 
 `<ArrayField>` accepts the [common field props](./Fields.md#common-field-props), except `emptyText` (use the child `empty` prop instead).
 
@@ -217,6 +218,35 @@ By default, `<ArrayField>` displays the items in the order they are stored in th
 ```
 {% endraw %}
 
+## `storeKey`
+
+By default, `ArrayField` stores the selection state in localStorage so users can revisit the page and find the selection preserved. The key for storing this state is based on the resource name, formatted as `${resource}.selectedIds`.
+
+When displaying multiple lists with the same data source, you may need to distinguish their selection states. To achieve this, assign a unique `storeKey` to each `ArrayField`. This allows each list to maintain its own selection state independently.
+
+In the example below, two `ArrayField` components display the same data source (`books`), but each stores its selection state under a different key (`customOne.selectedIds` and `customTwo.selectedIds`). This ensures that both components can coexist on the same page without interfering with each other's state.
+
+```jsx
+<Stack direction="row" spacing={2}>
+    <ArrayField
+        source="books"
+        storeKey="customOne"
+    >
+        <Datagrid>
+            <TextField source="title" />
+        </Datagrid>
+    </ArrayField>
+    <ArrayField
+        source="books"
+        storeKey="customTwo"
+    >
+        <Datagrid>
+            <TextField source="title" />
+        </Datagrid>
+    </ArrayField>
+</Stack>
+```
+
 ## Using The List Context
 
 `<ArrayField>` creates a [`ListContext`](./useListContext.md) with the field value, so you can use any of the list context values in its children. This includes callbacks to sort, filter, and select items.

packages/ra-ui-materialui/src/field/ArrayField.spec.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import {
     CoreAdminContext,
     ResourceContextProvider,
@@ -12,7 +12,23 @@ import { NumberField } from './NumberField';
 import { TextField } from './TextField';
 import { Datagrid } from '../list';
 import { SimpleList } from '../list';
-import { ListContext } from './ArrayField.stories';
+import { ListContext, TwoArrayFieldsSelection } from './ArrayField.stories';
+
+beforeAll(() => {
+    jest.spyOn(console, 'error').mockImplementation((message, ...args) => {
+        if (
+            typeof message === 'string' &&
+            message.includes('React will try recreating this component tree')
+        ) {
+            return;
+        }
+        console.warn(message, ...args); // Still log other errors
+    });
+});
+
+afterAll(() => {
+    jest.restoreAllMocks();
+});
 
 describe('<ArrayField />', () => {
     const sort = { field: 'id', order: 'ASC' };
@@ -158,4 +174,41 @@ describe('<ArrayField />', () => {
             ).toBeTruthy();
         });
     });
+
+    it('should not select the same id in both ArrayFields when selected in one', async () => {
+        render(<TwoArrayFieldsSelection />);
+        await waitFor(() => {
+            expect(screen.queryAllByRole('checkbox').length).toBeGreaterThan(2);
+        });
+
+        const checkboxes = screen.queryAllByRole('checkbox');
+
+        expect(checkboxes.length).toBeGreaterThan(3);
+
+        // Select an item in the memberships list
+        fireEvent.click(checkboxes[1]);
+        render(<TwoArrayFieldsSelection />);
+
+        await waitFor(() => {
+            expect(checkboxes[1]).toBeChecked();
+        });
+
+        expect(checkboxes[3]).not.toBeChecked();
+
+        fireEvent.click(checkboxes[3]); // Portfolios row 1
+        render(<TwoArrayFieldsSelection />);
+
+        await waitFor(() => {
+            expect(checkboxes[3]).toBeChecked();
+            expect(checkboxes[1]).toBeChecked(); // Membership remains checked
+        });
+
+        fireEvent.click(checkboxes[1]);
+        render(<TwoArrayFieldsSelection />);
+
+        await waitFor(() => {
+            expect(checkboxes[1]).not.toBeChecked();
+            expect(checkboxes[3]).toBeChecked(); // Portfolios remain selected
+        });
+    });
 });

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

@@ -182,3 +182,70 @@ export const InShowLayout = () => (
         </AdminContext>
     </TestMemoryRouter>
 );
+
+export const TwoArrayFieldsSelection = () => (
+    <TestMemoryRouter>
+        <AdminContext>
+            <ResourceContextProvider value="organizations">
+                <RecordContextProvider
+                    value={{
+                        id: 1,
+                        name: 'Acme Corp',
+                        memberships: [
+                            { id: 1, userId: 1001, role: 'Admin' },
+                            { id: 2, userId: 1002, role: 'Member' },
+                        ],
+                        portfolios: [
+                            {
+                                id: 1,
+                                name: 'Growth Portfolio',
+                                creatorId: 1001,
+                            },
+                            {
+                                id: 2,
+                                name: 'Tech Innovations',
+                                creatorId: 1002,
+                            },
+                        ],
+                    }}
+                >
+                    <Card sx={{ m: 1, p: 1 }}>
+                        <SimpleShowLayout>
+                            <TextField source="name" />
+
+                            {/* Memberships ArrayField */}
+                            <ArrayField
+                                source="memberships"
+                                storeKey="organization_memberships"
+                            >
+                                <Datagrid
+                                    rowClick="toggleSelection"
+                                    bulkActionButtons={true}
+                                    isRowSelectable={() => true}
+                                >
+                                    <TextField source="id" />
+                                    <TextField source="role" />
+                                </Datagrid>
+                            </ArrayField>
+
+                            {/* Portfolios ArrayField */}
+                            <ArrayField
+                                source="portfolios"
+                                storeKey="organization_portfolios"
+                            >
+                                <Datagrid
+                                    rowClick="toggleSelection"
+                                    bulkActionButtons={true}
+                                    isRowSelectable={() => true}
+                                >
+                                    <TextField source="id" />
+                                    <TextField source="name" />
+                                </Datagrid>
+                            </ArrayField>
+                        </SimpleShowLayout>
+                    </Card>
+                </RecordContextProvider>
+            </ResourceContextProvider>
+        </AdminContext>
+    </TestMemoryRouter>
+);

packages/ra-ui-materialui/src/field/ArrayField.tsx

@@ -79,9 +79,15 @@ const ArrayFieldImpl = <
 >(
     props: ArrayFieldProps<RecordType>
 ) => {
-    const { children, resource, perPage, sort, filter } = props;
+    const { children, resource, perPage, sort, filter, storeKey } = props;
     const data = useFieldValue(props) || emptyArray;
-    const listContext = useList({ data, resource, perPage, sort, filter });
+    const listContext = useList({
+        data,
+        resource: storeKey || resource, // Prioritize storeKey if provided
+        perPage,
+        sort,
+        filter,
+    });
     return (
         <ListContextProvider value={listContext}>
             {children}
@@ -99,6 +105,7 @@ export interface ArrayFieldProps<
     perPage?: number;
     sort?: SortPayload;
     filter?: FilterPayload;
+    storeKey?: string | false;
 }
 
 const emptyArray = [];