added the possibility of replacing TypeaheadSelector with a user supp…

…lied component
edwardsamuel · Jul 2, 2015 · ac87988 · ac87988
1 parent 8905feb
commit ac87988
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 8 deletions.
diff --git a/src/typeahead/index.js b/src/typeahead/index.js
@@ -46,7 +46,8 @@ var Typeahead = React.createClass({
     formInputOption: React.PropTypes.oneOfType([
       React.PropTypes.string,
       React.PropTypes.func
-    ])
+    ]),
+    customListComponent: React.PropTypes.func
   },
 
   getDefaultProps: function() {
@@ -63,7 +64,8 @@ var Typeahead = React.createClass({
       onKeyUp: function(event) {},
       onFocus: function(event) {},
       onBlur: function(event) {},
-      filterOption: null
+      filterOption: null,
+      customListComponent: TypeaheadSelector
     };
   },
 
@@ -124,13 +126,8 @@ var Typeahead = React.createClass({
       return "";
     }
 
-    // There are no typeahead / autocomplete suggestions
-    if (!this._hasHint()) {
-      return "";
-    }
-
     return (
-      <TypeaheadSelector
+      <this.props.customListComponent
         ref="sel" options={this.state.visible}
         onOptionSelected={this._onOptionSelected}
         customValue={this._getCustomValue()}

diff --git a/test/typeahead-test.js b/test/typeahead-test.js
@@ -460,5 +460,48 @@ describe('Typeahead Component', function() {
         });
       });
     });
+
+    context('customListComponent', function() {
+      before(function() {
+        ListComponent = React.createClass({
+          render: function() {
+            return <div></div>;
+          }
+        });
+
+        this.ListComponent = ListComponent;
+      })
+
+      beforeEach(function() {
+
+        this.component = TestUtils.renderIntoDocument(
+          <Typeahead
+            options={ BEATLES }
+            customListComponent={this.ListComponent}/>
+        );
+      });
+
+      it('should not show the customListComponent when the input is empty', function() {
+        var results = TestUtils.scryRenderedComponentsWithType(this.component, this.ListComponent);
+        assert.equal(0, results.length);
+      });
+
+      it('should show the customListComponent when the input is not empty', function() {
+        var input = this.component.refs.entry.getDOMNode();
+        input.value = "o";
+        TestUtils.Simulate.change(input);
+        var results = TestUtils.scryRenderedComponentsWithType(this.component, this.ListComponent);
+        assert.equal(1, results.length);
+      });
+
+      it('should no longer show the customListComponent after an option has been selected', function() {
+        var input = this.component.refs.entry.getDOMNode();
+        input.value = "o";
+        TestUtils.Simulate.change(input);
+        TestUtils.Simulate.keyDown(input, { keyCode: Keyevent.DOM_VK_TAB });
+        var results = TestUtils.scryRenderedComponentsWithType(this.component, this.ListComponent);
+        assert.equal(0, results.length);
+      });
+    })
   });
 });