Merge pull request #3145 from cherniavskii/AutocompleteArrayInput-sug…

…gestionsContainerProps [AutocompleteArrayInput] Allow to override Popper props
marmelab · Apr 19, 2019 · 88e9db9 · 88e9db9
2 parents c55cb64 + 8b81361
commit 88e9db9
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/docs/Inputs.md b/docs/Inputs.md
@@ -312,6 +312,17 @@ import { AutocompleteArrayInput, ReferenceArrayInput } from 'react-admin'
 </ReferenceArrayInput>
 ```
 
+If you need to override the props of the suggestions container (a `Popper` element), you can specify them using the `options.suggestionsContainerProps`. For example:
+
+{% raw %}
+```jsx
+<AutocompleteArrayInput source="category" options={{
+    suggestionsContainerProps: {
+        disablePortal: true,
+}} />
+```
+{% endraw %}
+
 **Tip**: `<ReferenceArrayInput>` is a stateless component, so it only allows to *filter* the list of choices, not to *extend* it. If you need to populate the list of choices based on the result from a `fetch` call (and if [`<ReferenceArrayInput>`](#referencearrayinput) doesn't cover your need), you'll have to [write your own Input component](#writing-your-own-input-component) based on [material-ui-chip-input](https://github.com/TeamWertarbyte/material-ui-chip-input).
 
 **Tip**: React-admin's `<AutocompleteInput>` has only a capital A, while material-ui's `<AutoComplete>` has a capital A and a capital C. Don't mix up the components!

diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js
@@ -231,7 +231,7 @@ export class AutocompleteArrayInput extends React.Component {
             source,
             value,
             ref,
-            options: { InputProps, ...options },
+            options: { InputProps, suggestionsContainerProps, ...options },
             ...other
         } = inputProps;
         if (typeof meta === 'undefined') {
@@ -366,7 +366,7 @@ export class AutocompleteArrayInput extends React.Component {
             containerProps: { className, ...containerProps },
             children,
         } = autosuggestOptions;
-        const { classes = {} } = this.props;
+        const { classes = {}, options } = this.props;
 
         // Force the Popper component to reposition the popup only when this.inputEl is moved to another location
         this.updateAnchorEl();
@@ -377,6 +377,7 @@ export class AutocompleteArrayInput extends React.Component {
                 open={Boolean(children)}
                 anchorEl={this.anchorEl}
                 placement="bottom-start"
+                {...options.suggestionsContainerProps}
             >
                 <Paper
                     square

diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.js b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.js
@@ -554,4 +554,27 @@ describe('<AutocompleteArrayInput />', () => {
             }, 250);
         });
     });
+
+    it('passes options.suggestionsContainerProps to the suggestions container', () => {
+        const onChange = jest.fn();
+
+        const wrapper = mount(
+            <AutocompleteArrayInput
+                {...defaultProps}
+                input={{ value: [], onChange }}
+                choices={[
+                    { id: 1, name: 'ab' },
+                    { id: 2, name: 'abc' },
+                    { id: 3, name: '123' },
+                ]}
+                options={{
+                    suggestionsContainerProps: {
+                        disablePortal: true,
+                    }
+                }}
+            />,
+            { context, childContextTypes }
+        );
+        expect(wrapper.find('Popper').props().disablePortal).toEqual(true);
+    });
 });