From 7ee8e6347c3387bfa0713250aa069e736dffbb9e Mon Sep 17 00:00:00 2001
From: Anis Elleuch <vadmeste@gmail.com>
Date: Tue, 3 Mar 2015 19:16:33 +0100
Subject: [PATCH 1/2] Add the ability to specify a ReactClass instead of the
 standard input html tag

---
 src/typeahead/index.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/typeahead/index.js b/src/typeahead/index.js
index 2cd272e0..771f85d9 100644
--- a/src/typeahead/index.js
+++ b/src/typeahead/index.js
@@ -16,6 +16,10 @@ var fuzzy = require('fuzzy');
 var Typeahead = React.createClass({
   propTypes: {
     customClasses: React.PropTypes.object,
+    CustomComponent: React.PropTypes.oneOfType([
+      React.PropTypes.func,
+      React.PropTypes.string
+    ]),
     maxVisible: React.PropTypes.number,
     options: React.PropTypes.array,
     defaultValue: React.PropTypes.string,
@@ -28,6 +32,7 @@ var Typeahead = React.createClass({
     return {
       options: [],
       customClasses: {},
+      CustomComponent: "input",
       defaultValue: "",
       placeholder: "",
       onKeyDown: function(event) { return },
@@ -168,7 +173,7 @@ var Typeahead = React.createClass({
 
     return (
       <div className={classList}>
-        <input ref="entry" type="text"
+        <this.props.CustomComponent ref="entry" type="text"
           placeholder={this.props.placeholder}
           className={inputClassList} defaultValue={this.state.entryValue}
           onChange={this._onTextEntryUpdated} onKeyDown={this._onKeyDown} />

From fad1ad2a318b3271f845bfa3338e38dfdd88118f Mon Sep 17 00:00:00 2001
From: Anis Elleuch <vadmeste@gmail.com>
Date: Thu, 12 Mar 2015 10:16:30 +0100
Subject: [PATCH 2/2] Use querySelector to select the input node when the user
 provides a ReactClass instead of the standard typeahead html input

---
 src/typeahead/index.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/typeahead/index.js b/src/typeahead/index.js
index f4701706..00bd9302 100644
--- a/src/typeahead/index.js
+++ b/src/typeahead/index.js
@@ -20,6 +20,7 @@ var Typeahead = React.createClass({
       React.PropTypes.func,
       React.PropTypes.string
     ]),
+    inputQuerySel: React.PropTypes.string,
     maxVisible: React.PropTypes.number,
     options: React.PropTypes.array,
     allowCustomValues: React.PropTypes.number,
@@ -34,6 +35,7 @@ var Typeahead = React.createClass({
       options: [],
       customClasses: {},
       CustomComponent: "input",
+      inputQuerySel: "input",
       allowCustomValues: 0,
       defaultValue: "",
       placeholder: "",
@@ -67,7 +69,7 @@ var Typeahead = React.createClass({
   },
 
   setEntryText: function(value) {
-    this.refs.entry.getDOMNode().value = value;
+    this.refs.container.getDOMNode().querySelector(this.props.inputQuerySel).value = value;
     this._onTextEntryUpdated();
   },
 
@@ -109,7 +111,7 @@ var Typeahead = React.createClass({
   },
 
   _onOptionSelected: function(option, event) {
-    var nEntry = this.refs.entry.getDOMNode();
+    var nEntry = this.refs.container.getDOMNode().querySelector(this.props.inputQuerySel);
     nEntry.focus();
     nEntry.value = option;
     this.setState({visible: this.getOptionsForValue(option, this.props.options),
@@ -119,7 +121,7 @@ var Typeahead = React.createClass({
   },
 
   _onTextEntryUpdated: function() {
-    var value = this.refs.entry.getDOMNode().value;
+    var value = this.refs.container.getDOMNode().querySelector(this.props.inputQuerySel).value;
     this.setState({visible: this.getOptionsForValue(value, this.props.options),
                    selection: null,
                    entryValue: value});
@@ -190,7 +192,7 @@ var Typeahead = React.createClass({
     var classList = React.addons.classSet(classes);
 
     return (
-      <div className={classList}>
+      <div ref="container" className={classList}>
         <this.props.CustomComponent ref="entry" type="text"
           placeholder={this.props.placeholder}
           className={inputClassList}