React-Admin | Bulk-Select with ReferenceField

In our application, we're trying to use Datagrid within ReferenceField to create/modify/delete related records, as shown in https://marmelab.com/blog/2018/07/09/react-admin-tutorials-form-for-related-records.html

All the functionality shown in the tutorial works well, except the bulk-actions added in a recent react-admin update. Clicking these checkboxes gives

Uncaught TypeError: _this.props.onToggleItem is not a function

I believe this is because the onToggleItem prop is normally provided by the List component, however in this application, Datagrid doesn't have a parent List component.

Adding a List component between ReferenceManyField and Datagrid allows bulk select/delete to work after some changes to the style, however this causes another issue: the current displayed page (i.e. records 1-10, 11-20, etc) is stored per-resource in the store, and so it is possible to have a situation where the store says we're on page 2, and displays page 2, which is empty because there are only enough related items to fill one page.

Am I missing something here? Or is bulk-select inside ReferenceManyField not possible at the moment?

export const NetworksShow = (props) => (
  <Show title={<NetworksTitle />} actions={<NetworksShowActions />} {...props}>

        <ReferenceManyField addLabel={false} target="ipid" reference="acl-network">
          <List style={{ margin: '0px -24px -16px -24px' }} {...props} actions={<NetworkACLCardActions ipid={props.id}/>} filter={{ ipid: _.has(props, 'id') ? props.id : undefined }}>
            <Datagrid hasBulkActions={true}>
              <ReferenceField label="Network" source="ipid" reference="networks">
                <TextField source="name" />
              </ReferenceField>
              <TextField label="URL" source="url" />
              <BWChip label="Action" source="wb" />
              <EditButton />
              <DeleteButton />
            </Datagrid>
          </List>
        </ReferenceManyField>
  </Show>
);

Solution

As a side-effect of https://github.com/marmelab/react-admin/pull/2365, it is now possible to use ReferenceManyField -> List -> Datagrid in the way described in the question.

For example, we're now doing the following:

      <ReferenceManyField addLabel={false} target="groupid" reference="users">
        <List
          style={{ margin: '0px -24px -16px -24px' }}
          filter={{ groupid: id }}
          {...props}
        >
          <Datagrid hasBulkActions>
            <LinkField label="Name" source="name" />
            <LinkField label="Username" source="email" />
            <FlexibleBooleanField label="Email" source="allowemail" />
            <ACLChip label="User Access" source="aclid" />
          </Datagrid>
        </List>
      </ReferenceManyField>

Bulk actions works with the above, and any issues with pagination are avoided as react-admin now checks and modifies pagination if nothing appears on the current page.