Adding an onClick prop that gets passed to <input> component.

README.md

@@ -130,6 +130,12 @@ Type: `Function`
 
 Event handler for the `focus` event on the typeahead input.
 
+#### props.onClick
+
+Type: `Function`
+
+Event handler for the `click` event on the typeahead input.
+
 #### props.onOptionSelected
 
 Type: `Function`
@@ -269,6 +275,12 @@ Type: `Function`
 
 Event handler for the `focus` event on the typeahead input.
 
+#### props.onClick
+
+Type: `Function`
+
+Event handler for the `click` event on the typeahead input.
+
 #### props.defaultSelected
 
 Type: `Array`

dist/react-typeahead.js

@@ -99,7 +99,7 @@ fuzzy.match = function(pattern, string, opts) {
   pattern = opts.caseSensitive && pattern || pattern.toLowerCase();
 
   // For each character in the string, either add it to the result
-  // or wrap in template if its the next string in the pattern
+  // or wrap in template if it's the next string in the pattern
   for(var idx = 0; idx < len; idx++) {
     ch = string[idx];
     if(compareString[idx] === pattern[patternIdx]) {
@@ -141,40 +141,40 @@ fuzzy.match = function(pattern, string, opts) {
 //        // string to put after matching character
 //      , post:    '</b>'
 //
-//        // Optional function. Input is an element from the passed in
-//        // `arr`, output should be the string to test `pattern` against.
+//        // Optional function. Input is an entry in the given arr`,
+//        // output should be the string to test `pattern` against.
 //        // In this example, if `arr = [{crying: 'koala'}]` we would return
 //        // 'koala'.
 //      , extract: function(arg) { return arg.crying; }
 //    }
 fuzzy.filter = function(pattern, arr, opts) {
   opts = opts || {};
   return arr
-          .reduce(function(prev, element, idx, arr) {
-            var str = element;
-            if(opts.extract) {
-              str = opts.extract(element);
-            }
-            var rendered = fuzzy.match(pattern, str, opts);
-            if(rendered != null) {
-              prev[prev.length] = {
-                  string: rendered.rendered
-                , score: rendered.score
-                , index: idx
-                , original: element
-              };
-            }
-            return prev;
-          }, [])
-
-          // Sort by score. Browsers are inconsistent wrt stable/unstable
-          // sorting, so force stable by using the index in the case of tie.
-          // See http://ofb.net/~sethml/is-sort-stable.html
-          .sort(function(a,b) {
-            var compare = b.score - a.score;
-            if(compare) return compare;
-            return a.index - b.index;
-          });
+    .reduce(function(prev, element, idx, arr) {
+      var str = element;
+      if(opts.extract) {
+        str = opts.extract(element);
+      }
+      var rendered = fuzzy.match(pattern, str, opts);
+      if(rendered != null) {
+        prev[prev.length] = {
+            string: rendered.rendered
+          , score: rendered.score
+          , index: idx
+          , original: element
+        };
+      }
+      return prev;
+    }, [])
+
+    // Sort by score. Browsers are inconsistent wrt stable/unstable
+    // sorting, so force stable by using the index in the case of tie.
+    // See http://ofb.net/~sethml/is-sort-stable.html
+    .sort(function(a,b) {
+      var compare = b.score - a.score;
+      if(compare) return compare;
+      return a.index - b.index;
+    });
 };
 
 
@@ -525,6 +525,7 @@ var Typeahead = React.createClass({displayName: "Typeahead",
     onKeyUp: React.PropTypes.func,
     onFocus: React.PropTypes.func,
     onBlur: React.PropTypes.func,
+    onClick: React.PropTypes.func,
     filterOption: React.PropTypes.oneOfType([
       React.PropTypes.string,
       React.PropTypes.func
@@ -560,6 +561,7 @@ var Typeahead = React.createClass({displayName: "Typeahead",
       onKeyUp: function(event) {},
       onFocus: function(event) {},
       onBlur: function(event) {},
+      onClick: function(event) {},
       filterOption: null,
       defaultClassNames: true,
       customListComponent: TypeaheadSelector
@@ -802,7 +804,8 @@ var Typeahead = React.createClass({displayName: "Typeahead",
           onKeyDown: this._onKeyDown, 
           onKeyUp: this.props.onKeyUp, 
           onFocus: this.props.onFocus, 
-          onBlur: this.props.onBlur})
+          onBlur: this.props.onBlur, 
+          onClick: this.props.onClick})
         ), 
          this._renderIncrementalSearchResults() 
       )

src/tokenizer/index.js

@@ -40,6 +40,7 @@ var TypeaheadTokenizer = React.createClass({
     onTokenAdd: React.PropTypes.func,
     onFocus: React.PropTypes.func,
     onBlur: React.PropTypes.func,
+    onClick: React.PropTypes.func,
     filterOption: React.PropTypes.oneOfType([
       React.PropTypes.string,
       React.PropTypes.func
@@ -76,6 +77,7 @@ var TypeaheadTokenizer = React.createClass({
       onKeyUp: function(event) {},
       onFocus: function(event) {},
       onBlur: function(event) {},
+      onClick: function(event) {},
       onTokenAdd: function() {},
       onTokenRemove: function() {}
     };
@@ -193,6 +195,7 @@ var TypeaheadTokenizer = React.createClass({
           onKeyUp={this.props.onKeyUp}
           onFocus={this.props.onFocus}
           onBlur={this.props.onBlur}
+          onClick={this.props.onClick}
           displayOption={this.props.displayOption}
           defaultClassNames={this.props.defaultClassNames}
           filterOption={this.props.filterOption} />

src/typeahead/index.js

@@ -38,6 +38,7 @@ var Typeahead = React.createClass({
     onKeyUp: React.PropTypes.func,
     onFocus: React.PropTypes.func,
     onBlur: React.PropTypes.func,
+    onClick: React.PropTypes.func,
     filterOption: React.PropTypes.oneOfType([
       React.PropTypes.string,
       React.PropTypes.func
@@ -73,6 +74,7 @@ var Typeahead = React.createClass({
       onKeyUp: function(event) {},
       onFocus: function(event) {},
       onBlur: function(event) {},
+      onClick: function(event) {},
       filterOption: null,
       defaultClassNames: true,
       customListComponent: TypeaheadSelector
@@ -316,6 +318,7 @@ var Typeahead = React.createClass({
           onKeyUp={this.props.onKeyUp}
           onFocus={this.props.onFocus}
           onBlur={this.props.onBlur}
+          onClick={this.props.onClick}
         />
         { this._renderIncrementalSearchResults() }
       </div>

test/tokenizer-test.js

@@ -123,6 +123,22 @@ describe('TypeaheadTokenizer Component', function() {
         TestUtils.Simulate.keyUp(input, { keyCode: 87 });
       });
     });
+
+    context('onClick', function() {
+      it('should bind to input', function() {
+        var component = TestUtils.renderIntoDocument(<Tokenizer
+          options={ BEATLES }
+          onClick={ function(e) {
+              assert.equal(e.constructor.name, 'SyntheticEvent');
+            }
+          }
+        />);
+
+        var input = React.findDOMNode(component.refs.typeahead.refs.entry);
+        TestUtils.Simulate.click(input);
+      });
+    });
+
     describe('props', function(){
       context('displayOption', function() {
         it('renders simple options verbatim when not specified', function() {

test/typeahead-test.js

@@ -372,6 +372,21 @@ describe('Typeahead Component', function() {
       });
     });
 
+    context('onClick', function() {
+      it('should bind to input', function() {
+        var component = TestUtils.renderIntoDocument(<Typeahead
+          options={ BEATLES }
+          onClick={ function(e) {
+              assert.equal(e.constructor.name, 'SyntheticEvent');
+            }
+          }
+        />);
+
+        var input = component.refs.entry.getDOMNode();
+        TestUtils.Simulate.click(input);
+      });
+    });
+
     context('inputProps', function() {
       it('should forward props to the input element', function() {
         var component = TestUtils.renderIntoDocument(<Typeahead