diff --git a/README.md b/README.md index b2a50ead..10a490d5 100644 --- a/README.md +++ b/README.md @@ -203,6 +203,12 @@ This component receives the following props : - `props.selectionIndex` - The index of the highlighted option for rendering +#### props.showOptionsWhenEmpty + +Type: `boolean` +Default: false + +If true, options will still be rendered when there is no value. ### Typeahead ([Exposed Component Functions][reactecf]) diff --git a/src/typeahead/index.js b/src/typeahead/index.js index b2b4190b..de9a58b6 100644 --- a/src/typeahead/index.js +++ b/src/typeahead/index.js @@ -9,7 +9,6 @@ var fuzzy = require('fuzzy'); var classNames = require('classnames'); var IDENTITY_FN = function(input) { return input; }; -var SHOULD_SEARCH_VALUE = function(input) { return input && input.trim().length > 0; }; var _generateAccessor = function(field) { return function(object) { return object[field]; }; }; @@ -56,7 +55,8 @@ var Typeahead = React.createClass({ customListComponent: React.PropTypes.oneOfType([ React.PropTypes.element, React.PropTypes.func - ]) + ]), + showOptionsWhenEmpty: React.PropTypes.bool }, getDefaultProps: function() { @@ -79,7 +79,8 @@ var Typeahead = React.createClass({ onBlur: function(event) {}, filterOption: null, defaultClassNames: true, - customListComponent: TypeaheadSelector + customListComponent: TypeaheadSelector, + showOptionsWhenEmpty: false }; }, @@ -99,8 +100,14 @@ var Typeahead = React.createClass({ }; }, + _shouldSkipSearch: function(input) { + var emptyValue = !input || input.trim().length == 0; + return !this.props.showOptionsWhenEmpty && emptyValue; + }, + getOptionsForValue: function(value, options) { - if (!SHOULD_SEARCH_VALUE(value)) { return []; } + if (this._shouldSkipSearch(value)) { return []; } + var filterOptions = this._generateFilterFunction(); var result = filterOptions(value, options); if (this.props.maxVisible) { @@ -136,7 +143,7 @@ var Typeahead = React.createClass({ _renderIncrementalSearchResults: function() { // Nothing has been entered into the textbox - if (!this.state.entryValue) { + if (this._shouldSkipSearch(this.state.entryValue)) { return ""; } diff --git a/test/typeahead-test.js b/test/typeahead-test.js index 0a8f29de..d62c871c 100644 --- a/test/typeahead-test.js +++ b/test/typeahead-test.js @@ -578,6 +578,31 @@ describe('Typeahead Component', function() { var input = component.refs.entry; assert.equal(input.tagName.toLowerCase(), 'input'); }); - }) + }); + + context('showOptionsWhenEmpty', function() { + it('do not render options when value is empty by default', function() { + var component = TestUtils.renderIntoDocument( + + ); + + var results = TestUtils.scryRenderedComponentsWithType(component, TypeaheadOption); + assert.equal(0, results.length); + }); + + it('render options when value is empty when set to true', function() { + var component = TestUtils.renderIntoDocument( + + ); + + var results = TestUtils.scryRenderedComponentsWithType(component, TypeaheadOption); + assert.equal(4, results.length); + }); + }); }); });