Show when showOptionsWhenEmpty is true only if the input is focused

GorillaStack · Apr 27, 2016 · f6bf81a · f6bf81a
1 parent 0d9e4bb
commit f6bf81a
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 5 deletions.
diff --git a/src/typeahead/index.js b/src/typeahead/index.js
@@ -88,13 +88,16 @@ var Typeahead = React.createClass({
       selection: this.props.value,
 
       // Index of the selection
-      selectionIndex: null
+      selectionIndex: null,
+
+      isFocused: false,
     };
   },
 
   _shouldSkipSearch: function(input) {
     var emptyValue = !input || input.trim().length == 0;
-    return !this.props.showOptionsWhenEmpty && emptyValue;
+    var isFocused = this.state && this.state.isFocused;
+    return !(this.props.showOptionsWhenEmpty && isFocused) && emptyValue;
   },
 
   getOptionsForValue: function(value, options) {
@@ -318,14 +321,32 @@ var Typeahead = React.createClass({
           onKeyDown={this._onKeyDown}
           onKeyPress={this.props.onKeyPress}
           onKeyUp={this.props.onKeyUp}
-          onFocus={this.props.onFocus}
-          onBlur={this.props.onBlur}
+          onFocus={this._onFocus}
+          onBlur={this._onBlur}
         />
         { this._renderIncrementalSearchResults() }
       </div>
     );
   },
 
+  _onFocus: function(event) {
+    this.setState({isFocused: true}, function () {
+      this._onTextEntryUpdated();
+    }.bind(this));
+    if ( this.props.onFocus ) {
+      return this.props.onFocus(event);
+    }
+  },
+
+  _onBlur: function(event) {
+    this.setState({isFocused: false}, function () {
+      this._onTextEntryUpdated();
+    }.bind(this));
+    if ( this.props.onBlur ) {
+      return this.props.onBlur(event);
+    }
+  },
+
   _renderHiddenInput: function() {
     if (!this.props.name) {
       return null;

diff --git a/test/typeahead-test.js b/test/typeahead-test.js
@@ -592,14 +592,27 @@ describe('Typeahead Component', function() {
         assert.equal(0, results.length);
       });
 
-      it('render options when value is empty when set to true', function() {
+      it('do not render options when value is empty when set to true and not focused', function() {
         var component = TestUtils.renderIntoDocument(
           <Typeahead
             options={ BEATLES }
             showOptionsWhenEmpty={ true }
           />
         );
 
+        var results = TestUtils.scryRenderedComponentsWithType(component, TypeaheadOption);
+        assert.equal(0, results.length);
+      });
+
+      it('render options when value is empty when set to true and focused', function() {
+        var component = TestUtils.renderIntoDocument(
+          <Typeahead
+            options={ BEATLES }
+            showOptionsWhenEmpty={ true }
+          />
+        );
+
+        TestUtils.Simulate.focus(component.refs.entry);
         var results = TestUtils.scryRenderedComponentsWithType(component, TypeaheadOption);
         assert.equal(4, results.length);
       });