From 95a8e266354f017e77024ecc10df71a10002239f Mon Sep 17 00:00:00 2001 From: Sagar Bakhtar Date: Tue, 11 Jun 2019 23:38:47 +0530 Subject: [PATCH 1/2] AutocompleteArrayInput suggestionLimit prop --- .../src/input/AutocompleteArrayInput.js | 25 +++++++++++++------ 1 file changed, 17 insertions(+), 8 deletions(-) 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, }; From fc83050eddcec2f8134b1c6cfa8816eeca940a26 Mon Sep 17 00:00:00 2001 From: Sagar Bakhtar Date: Wed, 12 Jun 2019 01:20:04 +0530 Subject: [PATCH 2/2] AutocompleteArrayInput suggestionLimit prop - test cases and docs update --- docs/Inputs.md | 1 + .../src/input/AutocompleteArrayInput.spec.js | 14 ++++++++++++++ 2 files changed, 15 insertions(+) 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.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); + }); });