From 7153989e1514c0ff4ffa344bc0ae5e2dc344843e Mon Sep 17 00:00:00 2001
From: Eric Giovanola <ericgio@gmail.com>
Date: Wed, 7 Sep 2016 19:33:48 -0700
Subject: [PATCH] Add `dropup` prop

---
 example/example.js     | 13 +++++++++----
 package.json           |  2 +-
 src/Typeahead.react.js | 11 +++++++++--
 test/TypeaheadSpec.js  | 10 ++++++++++
 4 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/example/example.js b/example/example.js
index babed08d..d2b4eca5 100644
--- a/example/example.js
+++ b/example/example.js
@@ -56,6 +56,7 @@ const Example = React.createClass({
       customMenuItemChildren: false,
       customToken: false,
       disabled: false,
+      dropup: false,
       largeDataSet: false,
       minLength: 0,
       multiple: false,
@@ -73,6 +74,7 @@ const Example = React.createClass({
       customMenuItemChildren,
       customToken,
       disabled,
+      dropup,
       largeDataSet,
       minLength,
       multiple,
@@ -81,7 +83,7 @@ const Example = React.createClass({
       text,
     } = this.state;
 
-    let props = {allowNew, disabled, multiple, selected};
+    const props = {align, allowNew, disabled, dropup, minLength, multiple, selected};
 
     if (customMenuItemChildren) {
       props.renderMenuItemChildren = this._renderMenuItemChildren;
@@ -108,16 +110,13 @@ const Example = React.createClass({
         <div className="container">
           <Typeahead
             {...props}
-            align={align}
             labelKey="name"
-            minLength={minLength}
             name="typeahead"
             onChange={selected => this.setState({selected})}
             onInputChange={text => this.setState({text})}
             options={largeDataSet ? bigData : states}
             placeholder="Choose a state..."
             ref="typeahead"
-            selected={selected}
           />
           <ExampleSection title="Typeahead Options">
             <div className="form-group">
@@ -158,6 +157,12 @@ const Example = React.createClass({
                 onChange={this._handleChange}>
                 Align menu: {this._renderAlignmentSelector()}
               </Checkbox>
+              <Checkbox
+                checked={dropup}
+                name="dropup"
+                onChange={this._handleChange}>
+                Menu dropup
+              </Checkbox>
               <Checkbox
                 checked={!!minLength}
                 name="minLength"
diff --git a/package.json b/package.json
index 89e59a61..0b9f3611 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-typeahead",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "React-based typeahead using the Bootstrap theme",
   "main": "lib/index.js",
   "directories": {
diff --git a/src/Typeahead.react.js b/src/Typeahead.react.js
index 05041b58..4b2018f4 100644
--- a/src/Typeahead.react.js
+++ b/src/Typeahead.react.js
@@ -41,6 +41,10 @@ const Typeahead = React.createClass({
      * be uncontrolled.
      */
     defaultSelected: PropTypes.array,
+    /**
+     * Specify whether the menu should appear above the input.
+     */
+    dropup: PropTypes.bool,
     /**
      * Optional callback to use when filtering the options. The function will
      * receive each option as the first parameter.
@@ -106,6 +110,7 @@ const Typeahead = React.createClass({
     return {
       allowNew: false,
       defaultSelected: [],
+      dropup: false,
       labelKey: 'label',
       maxResults: 100,
       onBlur: noop,
@@ -163,7 +168,7 @@ const Typeahead = React.createClass({
   },
 
   render() {
-    const {allowNew, className, labelKey, paginate} = this.props;
+    const {allowNew, className, dropup, labelKey, paginate} = this.props;
     const {shownResults, text} = this.state;
 
     // First filter the results by the input string.
@@ -182,7 +187,9 @@ const Typeahead = React.createClass({
 
     return (
       <div
-        className={cx('bootstrap-typeahead', 'open', className)}
+        className={cx('bootstrap-typeahead', 'open', {
+          'dropup': dropup,
+        }, className)}
         style={{position: 'relative'}}>
         {this._renderInput(results)}
         {this._renderMenu(results, shouldPaginate)}
diff --git a/test/TypeaheadSpec.js b/test/TypeaheadSpec.js
index 9a3361fe..06c5c40c 100644
--- a/test/TypeaheadSpec.js
+++ b/test/TypeaheadSpec.js
@@ -148,4 +148,14 @@ describe('<Typeahead>', () => {
     expect(paginatorNodes.length).to.equal(0);
   });
 
+  it('should add the `dropup` className when `dropup=true`', () => {
+    const instance = getTypeaheadInstance({...baseProps, dropup: true});
+    const TypeaheadNode = ReactTestUtils.findRenderedDOMComponentWithClass(
+      instance,
+      'dropup'
+    );
+
+    expect(TypeaheadNode).to.exist;
+  });
+
 });