Merge pull request #2678 from marmelab/override-popper-props

[RFR] Allow to override the Popper props in AutocompleteInput

docs/Inputs.md

@@ -177,7 +177,7 @@ If you want to limit the initial choices shown to the current value only, you ca
 When dealing with a large amount of `choices` you may need to limit the number of suggestions that are rendered in order to maintain usable performance. The `shouldRenderSuggestions` is an optional prop that allows you to set conditions on when to render suggestions. An easy way to improve performance would be to skip rendering until the user has entered 2 or 3 characters in the search box. This lowers the result set significantly, and might be all you need (depending on your data set). 
 Ex. `<AutocompleteInput shouldRenderSuggestions={(val) => { return val.trim() > 2 }} />` would not render any suggestions until the 3rd character was entered. This prop is passed to the underlying `react-autosuggest` component and is documented [here](https://github.com/moroshko/react-autosuggest#should-render-suggestions-prop).
 
-Lastly, `<AutocompleteInput>` renders a material-ui `<TextField>` component. Use the `options` attribute to override any of the `<TextField>` attributes:
+`<AutocompleteInput>` renders a material-ui `<TextField>` component. Use the `options` attribute to override any of the `<TextField>` attributes:
 
 {% raw %}
 ```jsx
@@ -197,6 +197,17 @@ import { AutocompleteInput, ReferenceInput } from 'react-admin'
 </ReferenceInput>
 ```
 
+Lastly, would 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
+<AutocompleteInput source="category" options={{
+    suggestionsContainerProps: {
+        disablePortal: true,
+}} />
+```
+{% endraw %}
+
 **Tip**: `<AutocompleteInput>` 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 [`<ReferenceInput>`](#referenceinput) doesn't cover your need), you'll have to [write your own Input component](#writing-your-own-input-component) based on material-ui `<AutoComplete>` component.
 
 **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!

packages/ra-ui-materialui/src/input/AutocompleteInput.js

@@ -324,19 +324,20 @@ export class AutocompleteInput extends React.Component {
         );
     };
 
-    renderSuggestionsContainer = options => {
+    renderSuggestionsContainer = autosuggestOptions => {
         const {
             containerProps: { className, ...containerProps },
             children,
-        } = options;
-        const { classes = {} } = this.props;
+        } = autosuggestOptions;
+        const { classes = {}, options } = this.props;
 
         return (
             <Popper
                 className={className}
                 open
                 anchorEl={this.inputEl}
                 placement="bottom-start"
+                {...options.suggestionsContainerProps}
             >
                 <Paper
                     square

packages/ra-ui-materialui/src/input/AutocompleteInput.spec.js

@@ -550,4 +550,27 @@ describe('<AutocompleteInput />', () => {
         expect(wrapper.state('suggestions')).toHaveLength(1);
         expect(onChange).toHaveBeenCalledWith(2);
     });
+
+    it('passes options.suggestionsContainerProps to the suggestions container', () => {
+        const onChange = jest.fn();
+
+        const wrapper = mount(
+            <AutocompleteInput
+                {...defaultProps}
+                input={{ value: null, 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);
+    });
 });