diff --git a/docs/Inputs.md b/docs/Inputs.md
index 117748139cc..cc69c591589 100644
--- a/docs/Inputs.md
+++ b/docs/Inputs.md
@@ -340,6 +340,7 @@ If you need to override the props of the suggestions container (a `Popper` eleme
| `optionText` | Optional | string | Function
| `name` | Fieldname of record to display in the suggestion item or function which accepts the current record as argument (`(record)=> {string}`) |
| `setFilter` | Optional | `Function` | null | A callback to inform the `searchText` has changed and new `choices` can be retrieved based on this `searchText`. Signature `searchText => void`. This function is automatically setup when using `ReferenceInput`. |
| `suggestionComponent` | Optional | Function | `({ suggestion, query, isHighlighted, props }) =>
` | Allows to override how the item is rendered. |
+| `suggestionLimit` | Optional | Number | null | Limits the numbers of suggestions that are shown in the dropdown list |
| `shouldRenderSuggestions` | Optional | Function | `() => true` | A function that returns a `boolean` to determine whether or not suggestions are rendered. Use this when working with large collections of data to improve performance and user experience. This function is passed into the underlying react-autosuggest component. Ex.`(value) => value.trim() > 2` |
## `` and ``
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js
index 54a027d145a..d3354956c00 100644
--- a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js
+++ b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js
@@ -131,7 +131,7 @@ export class AutocompleteArrayInput extends React.Component {
componentWillMount() {
this.setState({
inputValue: this.getInputValue(this.props.input.value),
- suggestions: this.props.choices,
+ suggestions: this.limitSuggestions(this.props.choices),
});
}
@@ -141,19 +141,19 @@ export class AutocompleteArrayInput extends React.Component {
this.setState({
inputValue: this.getInputValue(input.value),
dirty: false,
- suggestions: this.props.choices,
+ suggestions: this.limitSuggestions(this.props.choices),
});
// Ensure to reset the filter
this.updateFilter('');
} else if (!isEqual(choices, this.props.choices)) {
this.setState(({ searchText }) => ({
- suggestions: choices.filter(suggestion =>
+ suggestions: this.limitSuggestions(choices.filter(suggestion =>
inputValueMatcher(
searchText,
suggestion,
this.getSuggestionText
)
- ),
+ )),
}));
}
}
@@ -192,13 +192,13 @@ export class AutocompleteArrayInput extends React.Component {
const { choices, inputValueMatcher } = this.props;
this.setState(({ searchText }) => ({
- suggestions: choices.filter(suggestion =>
+ suggestions: this.limitSuggestions(choices.filter(suggestion =>
inputValueMatcher(
searchText,
suggestion,
this.getSuggestionText
)
- ),
+ )),
}));
};
@@ -423,11 +423,11 @@ export class AutocompleteArrayInput extends React.Component {
} else {
this.setState({
searchText: value,
- suggestions: choices.filter(choice =>
+ suggestions: this.limitSuggestions(choices.filter(choice =>
this.getSuggestionText(choice)
.toLowerCase()
.includes(value.toLowerCase())
- ),
+ )),
});
}
}
@@ -446,6 +446,14 @@ export class AutocompleteArrayInput extends React.Component {
return true;
};
+ limitSuggestions = suggestions => {
+ const { suggestionLimit = 0 } = this.props;
+ if (Number.isInteger(suggestionLimit) && suggestionLimit > 0) {
+ return suggestions.slice(0, suggestionLimit);
+ }
+ return suggestions;
+ };
+
render() {
const {
alwaysRenderSuggestions,
@@ -523,6 +531,7 @@ AutocompleteArrayInput.propTypes = {
shouldRenderSuggestions: PropTypes.func,
source: PropTypes.string,
suggestionComponent: PropTypes.func,
+ suggestionLimit: PropTypes.number,
translate: PropTypes.func.isRequired,
translateChoice: PropTypes.bool.isRequired,
};
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.js b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.js
index 96bc931739f..f0299f7d571 100644
--- a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.js
+++ b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.js
@@ -585,4 +585,18 @@ describe('', () => {
wrapper.find('ForwardRef(Popper)').props().disablePortal
).toEqual(true);
});
+
+ it('should limit suggestions when suggestionLimit is passed', () => {
+ const wrapper = shallow(
+
+ );
+ expect(wrapper.state('suggestions')).toHaveLength(1);
+ });
});