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);
+ });
+ });
});
});