Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RFR] Allow to override the Popper props in AutocompleteInput #2678

Merged
merged 1 commit into from
Dec 19, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion docs/Inputs.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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!
Expand Down
7 changes: 4 additions & 3 deletions packages/ra-ui-materialui/src/input/AutocompleteInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
23 changes: 23 additions & 0 deletions packages/ra-ui-materialui/src/input/AutocompleteInput.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});