Update the ReferenceManyField filtering documentation

docs/ReferenceManyField.md

@@ -189,32 +189,37 @@ You can filter the query used to populate the possible values. Use the `filter`
 
 {% endraw %}
 
-## Filter Inputs
+## 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 an array of filter inputs to the `ReferenceManyField` using [the `FilterForm` component](./FilterForm.md):
+You can add an array of filter inputs to the `ReferenceManyField` using [the `FilterForm`](./FilterForm.md) and to [the `FilterButton`](./FilterButton.md)  components:
 
 {% raw %}
 
 ```jsx
-<ReferenceManyField reference="comments" target="post_id">
-    <FilterForm
-        filters={[<TextInput source="q" label="Search" alwaysOn />]}
-    />
-    <Datagrid>
-        ...
-    </Datagrid>
-</ReferenceManyField>
+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 %}
 
-**Tip:** `ReferenceManyField` doesn't provide any `FilterButton`, so you need to add the `alwaysOn` prop to your filter inputs.
-
 ## `label`
 
 By default, `<SimpleShowLayout>`, `<Datagrid>` and other layout components infer the label of a field based on its `source`. For a `<ReferenceManyField>`, the source defaults to `id`, so this may not be what you expect:

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>