Datagrids are conflicting when the resources use the same id

[fxdave]

What you were expecting: first Datagrid is isolated from the second

What happened instead: changing the first Datagrid's state changes the second Datagrid's state.

Steps to reproduce: Have two Datagrid, both should have a row with the same id.

Related code:

export const OrganizationShow = () => (
  <Show>
    <SimpleShowLayout>
      <TextField source="id" />
      <TextField source="name" />
      <NumberField source="customMaxAllowedProperties" />
      <ArrayField source="memberships">
        <Datagrid itemID="asd">
          <TextField source="id" />
          <ReferenceField source="userId" reference="users" />
          <TextField source="role" />
          <ReferenceField source="organizationId" reference="organizations" />
          <DateField source="createdAt" />
          <DateField source="updatedAt" />
        </Datagrid>
      </ArrayField>
      <ReferenceField reference="subscriptions" source="subscription.id" />
      <ArrayField source="portfolios">
        <Datagrid>
          <TextField source="id" />
          <TextField source="name" />
          <ReferenceField source="creatorId" reference="users" />
          <ReferenceField source="organizationId" reference="organizations" />
          <DateField source="createdAt" />
          <DateField source="updatedAt" />
        </Datagrid>
      </ArrayField>
    </SimpleShowLayout>
  </Show>
);

Environment

• React-admin version: 5.3.4
• React version: 18.3.1
• Browser: firefox 132.0.2-1

[fzaninotto]

Thanks for your report.

By default, the selection state is linked to the current resource. This is necessary so that an existing selection can be erased in a side effect, e.g. when deleting a record.

Some list contexts can opt out of that shared global state (see for instance <ReferenceManyField storeKey>. We probably need to add support for the same storeKey to the <ArrayField> as well. A PR adding this support is welcome!

In the meantime, try passing a different resource for each ArrayField:

export const OrganizationShow = () => (
  <Show>
    <SimpleShowLayout>
      <TextField source="id" />
      <TextField source="name" />
      <NumberField source="customMaxAllowedProperties" />
-     <ArrayField source="memberships">
+     <ArrayField source="memberships" resource="memberships">
        <Datagrid itemID="asd">
          <TextField source="id" />
          <ReferenceField source="userId" reference="users" />
          <TextField source="role" />
          <ReferenceField source="organizationId" reference="organizations" />
          <DateField source="createdAt" />
          <DateField source="updatedAt" />
        </Datagrid>
      </ArrayField>
      <ReferenceField reference="subscriptions" source="subscription.id" />
-     <ArrayField source="portfolios">
+     <ArrayField source="portfolios" resource="portfolios">
        <Datagrid>
          <TextField source="id" />
          <TextField source="name" />
          <ReferenceField source="creatorId" reference="users" />
          <ReferenceField source="organizationId" reference="organizations" />
          <DateField source="createdAt" />
          <DateField source="updatedAt" />
        </Datagrid>
      </ArrayField>
    </SimpleShowLayout>
  </Show>
);