Merge pull request #164 from dseeto/master

Make skipping blank searches configurable

Author: fmoo

README.md

@@ -191,6 +191,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])
 

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]; };
 };
@@ -54,7 +53,8 @@ var Typeahead = React.createClass({
     customListComponent: React.PropTypes.oneOfType([
       React.PropTypes.element,
       React.PropTypes.func
-    ])
+    ]),
+    showOptionsWhenEmpty: React.PropTypes.bool
   },
 
   getDefaultProps: function() {
@@ -75,7 +75,8 @@ var Typeahead = React.createClass({
       onBlur: function(event) {},
       filterOption: null,
       defaultClassNames: true,
-      customListComponent: TypeaheadSelector
+      customListComponent: TypeaheadSelector,
+      showOptionsWhenEmpty: false
     };
   },
 
@@ -95,8 +96,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) {
@@ -132,7 +139,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 "";
     }
 

test/typeahead-test.js

@@ -563,6 +563,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(
+          <Typeahead
+            options={ BEATLES }
+          />
+        );
+
+        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(
+          <Typeahead
+            options={ BEATLES }
+            showOptionsWhenEmpty={ true }
+          />
+        );
+
+        var results = TestUtils.scryRenderedComponentsWithType(component, TypeaheadOption);
+        assert.equal(4, results.length);
+      });
+    });
   });
 });