diff --git a/README.md b/README.md index a519ec44ca..2c0d0a6f49 100644 --- a/README.md +++ b/README.md @@ -379,6 +379,7 @@ function onInputKeyDown(event) { | `delimiter` | string | ',' | delimiter to use to join multiple values | | `disabled` | boolean | false | whether the Select is disabled or not | | `escapeClearsValue` | boolean | true | whether escape clears the value when the menu is closed | +| `filterMaxResults` | number | undefined | limit the number of results being shown when using default filtering options. Shows first `filterMaxResults` items. | | `filterOption` | function | undefined | method to filter a single option `(option, filterString) => boolean` | | `filterOptions` | boolean or function | undefined | boolean to enable default filtering or function to filter the options array `([options], filterString, [values]) => [options]` | | `id` | string | undefined | html id to set on the input element for accessibility or tests diff --git a/src/Select.js b/src/Select.js index d8b8542d20..e689505862 100644 --- a/src/Select.js +++ b/src/Select.js @@ -990,6 +990,7 @@ class Select extends React.Component { filterValue, excludeOptions, { + filterMaxResults: this.props.filterMaxResults, filterOption: this.props.filterOption, ignoreAccents: this.props.ignoreAccents, ignoreCase: this.props.ignoreCase, @@ -1209,6 +1210,7 @@ Select.propTypes = { delimiter: PropTypes.string, // delimiter to use to join multiple values for the hidden field value disabled: PropTypes.bool, // whether the Select is disabled or not escapeClearsValue: PropTypes.bool, // whether escape clears the value when the menu is closed + filterMaxResults: PropTypes.number, // limit the filtered items to max count when using default filtering function filterOption: PropTypes.func, // method to filter a single option (option, filterString) filterOptions: PropTypes.any, // boolean to enable default filtering or function to filter the options array ([options], filterString, [values]) id: PropTypes.string, // html id to set on the input element for accessibility or tests diff --git a/src/utils/defaultFilterOptions.js b/src/utils/defaultFilterOptions.js index 9223d77151..2a32e76e78 100644 --- a/src/utils/defaultFilterOptions.js +++ b/src/utils/defaultFilterOptions.js @@ -20,7 +20,7 @@ const filterOptions = (options, filterValue, excludeOptions, props) => { if (excludeOptions) excludeOptions = excludeOptions.map(i => i[props.valueKey]); - return options.filter(option => { + let results = options.filter(option => { if (excludeOptions && excludeOptions.indexOf(option[props.valueKey]) > -1) return false; if (props.filterOption) return props.filterOption.call(undefined, option, filterValue); if (!filterValue) return true; @@ -55,6 +55,12 @@ const filterOptions = (options, filterValue, excludeOptions, props) => { (labelTest && props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0) ); }); + + if (props.filterMaxResults) { + results = results.slice(0, props.filterMaxResults); + } + + return results; }; export default filterOptions; diff --git a/test/Select-test.js b/test/Select-test.js index 946b1f7858..859aeda037 100644 --- a/test/Select-test.js +++ b/test/Select-test.js @@ -2920,6 +2920,26 @@ describe('Select', () => { expect(options, 'to have length', 2); }); }); + + describe('filterMaxResults', () => { + + beforeEach(() => { + + instance = createControl({ + options: longerListOptions, + filterMaxResults: 3, + searchable: true + }); + }); + it('uses the default options', () => { + TestUtils.Simulate.mouseDown(ReactDOM.findDOMNode(instance).querySelector('.Select-arrow'), { button: 0 }); + var options = ReactDOM.findDOMNode(instance).querySelectorAll('.Select-option'); + expect(options[0], 'to have text', 'One'); + expect(options[1], 'to have text', 'Two'); + expect(options[2], 'to have text', 'Three'); + expect(options, 'to have length', 3); + }); + }); describe('empty filterOptions function', () => {