ReferenceManyField with a List and Datagrid does not apply filter

[darren-martz]

What you were expecting:
In a TabbedShowLayout, one of the tabs should show a Datagrid of associated records with filter and pagination. The Datagrid should only see records with the target value filter applied.

What happened instead:
An initial getList call is made with no filter applied, ignoring the target. A second getMultipleReferences call is made with the filter and sorting applied, the resulting payload is correct, but it never displayed. The original value is used. Applying a user filter after makes a getList call, sets the filter, but without the target value filter being applied.

This does not seem correct to me with the double initial call and dropping the target filter from the ReferenceManyField. Removing the List component from the code does retain the proper target filtering, but at the expense of the pagination and user filter abilities.

Related code:

const LogShow = withStyles(styles)(({classes, record = {}, ...props}) => (
    <Show {...props}>
        <TabbedShowLayout>
            <Tab label="summary">
                <TextField source="jobname" label="Job Name"/>
            </Tab>

            <Tab label="Logs">
                <ReferenceManyField
                    disableRemove
                    addLabel={false}
                    reference="joblog"
                    fullWidth={true}
                    target="txn"
                    sort={{field: "txn", order: "DESC"}}
                >
                    <List {...props}
                          pagination={<Pagination rowsPerPageOptions={[5, 10, 25, 100]}/>}
                          perPage={10}
                          bulkActionButtons={false}
                          exporter={false}
                          filter={{txn: record.id}}
                          sort={{field: "created", order: "DESC"}}
                          filters={<LogFilter/>}
                    >
                        <CustomizableDatagrid
                            defaultColumns={["txn", "message"]}
                        >
                            <TextField source="txn" label="Txn ID"/>
                            <TextField source="message"/>
                        </CustomizableDatagrid>
                    </List>
                </ReferenceManyField>
            </Tab>
        </TabbedShowLayout>
    </Show>
));

Environment

• React-admin version: 3.11.1
• React version: 16.14.0
• Browser: Chrome

[darren-martz]

Further evidence, assuming I have not missed something entirely here, is taking the React Admin sandbox in the advanced tutorials. Its the one showing the tabbed show view with a list of comments as the last tab. Most entries have 1-2 comments displayed when browsed.

https://codesandbox.io/s/2393m2k5rj

In the PostShow.js source file, inject <List {...props}> between the <ReferenceManyField> and the <Datagrid> components. Immediately the UI changes, but most notably is that every comment in the database is now showing unfiltered.

[fzaninotto]

List isn't a valid child of ReferenceManyField. It's only intended to be used as the main page component for resource lists.

https://marmelab.com/react-admin/Fields.html#referencemanyfield

[jbek7]

I've exactly the same use-case with one-to-many relationship. And I'm trying to add a search filter to ReferenceManyField like Lists have. Did you find any solutions, @darren-martz ?

@fzaninotto can this be achieved on the user-land?

[scheiblr]

I'm currently stucking at the same point. Do you guys want to enable List also to work as a child of ReferenceManyField?

[scheiblr]

just if somebody stops here, it's at least possible to use pagination as referenced here.

[fzaninotto]

For your information, we're currently working on useList, a way to reuse the filtering/pagination/sorting features in all list components (see #6321).

[3akram]

Hi, I was facing that issue couple minutes ago. and i wrapped the Datagrid in a List so it's like that now

<RerefenceManyFIeld label="YOUR_LABEL" reference="YOUR_REFERENCE" target="YOUR_TARGET">
  <List {...props}>
    <Datagrid>
      YOUR INPUTS / FIELDS GOES HERE

that worked for me

[jbek7]

Hi, I was facing that issue couple minutes ago. and i wrapped the Datagrid in a List so it's like that now

<RerefenceManyFIeld label="YOUR_LABEL" reference="YOUR_REFERENCE" target="YOUR_TARGET">
  <List {...props}>
    <Datagrid>
      YOUR INPUTS / FIELDS GOES HERE

that worked for me

That will make two calls to the resource one for RerefenceManyField with target criteria another one with no criteria for <List>