From 2544b1ed44dd1a5cf09e0dfdf4f6c543e48be100 Mon Sep 17 00:00:00 2001
From: Igor Kuzmenko <igor@kuzzmi.com>
Date: Sun, 28 May 2017 14:22:02 +0200
Subject: [PATCH] Adds a workaround for onClick in TypeaheadOption onClick is
 not fired when clicked on a TypeaheadOption. This adds `onMouseDown` with the
 same handler to handle clicks.

---
 src/typeahead/option.js |  5 ++++-
 test/typeahead-test.js  | 21 +++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/typeahead/option.js b/src/typeahead/option.js
index b6dfc313..b2579938 100644
--- a/src/typeahead/option.js
+++ b/src/typeahead/option.js
@@ -33,8 +33,11 @@ var TypeaheadOption = React.createClass({
 
     var classList = classNames(classes);
 
+    // For some reason onClick is not fired when clicked on an option
+    // onMouseDown is used here as a workaround of #205 and other
+    // related tickets
     return (
-      <li className={classList} onClick={this._onClick}>
+      <li className={classList} onClick={this._onClick} onMouseDown={this._onClick}>
         <a href="javascript: void 0;" className={this._getClasses()} ref="anchor">
           { this.props.children }
         </a>
diff --git a/test/typeahead-test.js b/test/typeahead-test.js
index b01bacec..1eb01716 100644
--- a/test/typeahead-test.js
+++ b/test/typeahead-test.js
@@ -138,6 +138,27 @@ describe('Typeahead Component', function() {
       });
     });
 
+    describe('mouse controls', function() {
+      // as of React 15.5.4 this does not work
+      xit('mouse click selects an option (click event)', function() {
+        var results = simulateTextInput(this.component, 'o');
+        var secondItem = ReactDOM.findDOMNode(results[1]);
+        var secondItemValue = secondItem.innerText;
+        var node = this.component.refs.entry;
+        TestUtils.Simulate.click(secondItem);
+        assert.equal(node.value, secondItemValue);
+      });
+      // but this one works
+      it('mouse click selects an option (mouseDown event)', function() {
+        var results = simulateTextInput(this.component, 'o');
+        var secondItem = ReactDOM.findDOMNode(results[1]);
+        var secondItemValue = secondItem.innerText;
+        var node = this.component.refs.entry;
+        TestUtils.Simulate.mouseDown(secondItem);
+        assert.equal(node.value, secondItemValue);
+      });
+    });
+
     describe('component functions', function() {
       beforeEach(function() {
         this.sinon = sinon.sandbox.create();