diff --git a/docs/Inputs.md b/docs/Inputs.md index e21818df2ec..dac8602fe07 100644 --- a/docs/Inputs.md +++ b/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. ` { 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, `` renders a material-ui `` component. Use the `options` attribute to override any of the `` attributes: +`` renders a material-ui `` component. Use the `options` attribute to override any of the `` attributes: {% raw %} ```jsx @@ -197,6 +197,17 @@ import { AutocompleteInput, ReferenceInput } from 'react-admin' ``` +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 + +``` +{% endraw %} + **Tip**: `` 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) doesn't cover your need), you'll have to [write your own Input component](#writing-your-own-input-component) based on material-ui `` component. **Tip**: React-admin's `` has only a capital A, while material-ui's `` has a capital A and a capital C. Don't mix up the components! diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.js b/packages/ra-ui-materialui/src/input/AutocompleteInput.js index c508a445ec3..db5c9751779 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteInput.js +++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.js @@ -324,12 +324,12 @@ 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 ( ', () => { 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( + , + { context, childContextTypes } + ); + expect(wrapper.find('Popper').props().disablePortal).toEqual(true); + }); });