Merge branch 'master' into 1.1.x

fmoo · Mar 25, 2016 · 321db82 · 321db82
2 parents 9bb4181 + efb9103
commit 321db82
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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(
+          <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);
+      });
+    });
   });
 });