Is it possible to add user search filters to a ReferenceManyField in React Admin v3?

Question

With React Admin it is possible to add Filters to a List component. An example of this can be seen in the demo: https://marmelab.com/react-admin-demo/#/commands

The code for this particular component: https://github.com/marmelab/react-admin/blob/master/examples/demo/src/orders/OrderList.js

const OrderFilter = withStyles(filterStyles)(({ classes, ...props }) => (
<Filter {...props}>
    <SearchInput source="q" alwaysOn />
    <ReferenceInput source="customer_id" reference="customers">
        <AutocompleteInput
            optionText={choice =>
                `${choice.first_name} ${choice.last_name}`
            }
        />
    </ReferenceInput>
    <DateInput source="date_gte" />
    <DateInput source="date_lte" />
    <TextInput source="total_gte" />
    <NullableBooleanInput source="returned" />
</Filter>));

...

const OrderList = ({ classes, ...props }) => (
<List
    {...props}
    filterDefaultValues={{ status: 'ordered' }}
    sort={{ field: 'date', order: 'DESC' }}
    perPage={25}
    filters={<OrderFilter />}
>
    <StyledTabbedDatagrid />
</List>
);

However, I can't figure out to add the same functionality to a ReferenceManyField. In the demo website this would for example be the Orders tab for a customer Edit component. Is there a way to configure a Filter component for the ReferenceManyField?

Answer 1

probably you already found the right answer, but for those who still have this problem. Here is a simple solution. Just use List inside you ReferenceManyField.

const MyFilter = (props) => (
    <Filter {...props}>
        <ReferenceInput
            label="MyFilter"
            source="wallet"
            reference="wallets"
            sort={{ field: 'name', order: 'ASC' }}
            filterToQuery={searchText => ({ name: searchText })}
            allowEmpty={true}
            alwaysOn
        >
            <AutocompleteInput optionText="name" />
        </ReferenceInput>
    </Filter>
);

<ReferenceManyField
    label={false}
    reference="wallets"
    target="user"
>
   <List filter={{ user: record.id}} filters={<MyFilter />}>
      <Datagrid {...props}>         
         <ReferenceField source="vendor" resource="vendors" reference="vendors">
            <TextField source="name"/>
         </ReferenceField>
      </Datagrid>
   </List>
</ReferenceManyField>