Merge pull request #3326 from sagarbakhtar/autocomplete-suggestionlimit

[RFR] Add suggestionLimit prop to <AutocompleteArrayInput>
marmelab · Jun 13, 2019 · 259466d · 259466d
2 parents 36b894a + fc83050
commit 259466d
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 8 deletions.
diff --git 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 | <code>string &#124; Function</code> | `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 }) => <div {...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` |
 
 ## `<BooleanInput>` and `<NullableBooleanInput>`

diff --git 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
@@ -585,4 +585,18 @@ describe('<AutocompleteArrayInput />', () => {
             wrapper.find('ForwardRef(Popper)').props().disablePortal
         ).toEqual(true);
     });
+
+    it('should limit suggestions when suggestionLimit is passed', () => {
+        const wrapper = shallow(
+            <AutocompleteArrayInput
+                {...defaultProps}
+                choices={[
+                    { id: 'M', name: 'Male' },
+                    { id: 'F', name: 'Female' },
+                ]}
+                suggestionLimit={1}
+            />
+        );
+        expect(wrapper.state('suggestions')).toHaveLength(1);
+    });
 });