Merge pull request #10467 from marmelab/doc/live_filtering_refM2Mfiel…

…d_refMfield

[Doc] Document live filtering with `ReferenceManyField` and `ReferenceManyToManyField`

docs/ReferenceManyField.md

@@ -171,11 +171,12 @@ const PostCommentsField = () => (
 );
 ```
 
-## `filter`
+## `filter`: Permanent Filter
 
 You can filter the query used to populate the possible values. Use the `filter` prop for that.
 
 {% raw %}
+
 ```jsx
 <ReferenceManyField
   reference="comments"
@@ -185,6 +186,38 @@ You can filter the query used to populate the possible values. Use the `filter`
    ...
 </ReferenceManyField>
 ```
+
+{% endraw %}
+
+## Filtering The References
+
+<video controls autoplay playsinline muted loop>
+  <source src="./img/ReferenceManyFieldFilterInput.mp4" type="video/mp4" />
+  Your browser does not support the video tag.
+</video>
+
+You can add filters to `<ReferenceManyField>` by adding [`<FilterForm>`](./FilterForm.md) and [`<FilterButton>`](./FilterButton.md):
+
+{% raw %}
+
+```jsx
+const filters = [<TextInput source="q" label="Search" />];
+
+const AuthorEdit = () => (
+  <Edit>
+    <SimpleForm>
+      <ReferenceManyField reference="comments" target="post_id">
+          <FilterButton filters={filters}/>
+          <FilterForm filters={filters}/>
+          <Datagrid>
+              ...
+          </Datagrid>
+      </ReferenceManyField>
+    </SimpleForm>
+  </Edit>
+);
+```
+
 {% endraw %}
 
 ## `label`

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

@@ -17,7 +17,12 @@ import englishMessages from 'ra-language-english';
 import { TextField } from '../field';
 import { ReferenceManyField } from './ReferenceManyField';
 import { Datagrid } from '../list/datagrid/Datagrid';
-import { BulkActionsToolbar, Pagination, SingleFieldList } from '../list';
+import {
+    BulkActionsToolbar,
+    FilterButton,
+    Pagination,
+    SingleFieldList,
+} from '../list';
 import { Notification } from '../layout/Notification';
 import { FilterForm } from '../list';
 import { TextInput } from '../input';
@@ -128,12 +133,13 @@ export const WithSingleFieldList = () => (
     </Wrapper>
 );
 
+const filters = [<TextInput source="q" label="Search" />];
+
 export const WithFilter = () => (
     <Wrapper>
         <ReferenceManyField reference="books" target="author_id">
-            <FilterForm
-                filters={[<TextInput source="q" label="Search" alwaysOn />]}
-            />
+            <FilterButton filters={filters} />
+            <FilterForm filters={filters} />
             <Datagrid bulkActionButtons={false}>
                 <TextField source="title" />
             </Datagrid>