Use 'absolute' positioning for menu instead of 'fixed'

The 'fixed' approach has a major downside:

The 'fixed' referential may not be the document when a parent node has CSS transforms.
But getBoundedClientRect() remains relative to the document no matter what.
Calculating a fixed position from it is difficult.

Using 'absolute' positioning makes things a lot easier. It is how bootstrap
dropdown menu works for example.

Author: cdevienne

lib/Autocomplete.js

@@ -24,15 +24,16 @@ let Autocomplete = React.createClass({
         return <div style={{...style, ...this.menuStyle}} children={items}/>
       },
       shouldItemRender () { return true },
+      menuMinSize: 100,
       menuStyle: {
         borderRadius: '3px',
         boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
         background: 'rgba(255, 255, 255, 0.9)',
         padding: '2px 0',
         fontSize: '90%',
-        position: 'fixed',
-        overflow: 'auto',
-        maxHeight: '50%', // TODO: don't cheat, let it flow to the bottom
+        position: 'absolute',
+        left: '0',
+        overflow: 'auto'
       }
     }
   },
@@ -76,6 +77,7 @@ let Autocomplete = React.createClass({
   },
 
   handleKeyDown (event) {
+    console.log(event);
     if (this.keyDownHandlers[event.key])
       this.keyDownHandlers[event.key].call(this, event)
     else {
@@ -220,11 +222,21 @@ let Autocomplete = React.createClass({
     var marginBottom = parseInt(computedStyle.marginBottom, 10)
     var marginLeft = parseInt(computedStyle.marginLeft, 10)
     var marginRight = parseInt(computedStyle.marginRight, 10)
+    var marginTop = parseInt(computedStyle.marginTop, 10)
+
+    var inputTop = rect.top - marginTop;
+    var inputBottom = rect.bottom + marginBottom;
+
+    var heightAfter = window.scrollY + window.screen.height - inputBottom;
+    var heightBefore = inputTop - window.scrollY;
+
+    var displayBefore = heightAfter < (this.props.menuMinSize + 10) && heightBefore > heightAfter;
+
     this.setState({
-      menuTop: rect.bottom + marginBottom,
-      menuLeft: rect.left + marginLeft,
-      menuWidth: rect.width + marginLeft + marginRight
-    })
+        menuWidth: rect.width + marginLeft + marginRight,
+        menuMaxHeight: (displayBefore ? heightBefore : heightAfter) - 10,
+        menuPosition: displayBefore ? 'before' : 'after'
+    });
   },
 
   highlightItemFromMouse (index) {
@@ -262,9 +274,13 @@ let Autocomplete = React.createClass({
       })
     })
     var style = {
-      left: this.state.menuLeft,
-      top: this.state.menuTop,
       minWidth: this.state.menuWidth,
+      maxHeight: this.state.menuMaxHeight
+    }
+    if (this.state.menuPosition === 'before') {
+        style.bottom = '100%';
+    } else if (this.state.menuPosition === 'after') {
+        style.top = '100%';
     }
     var menu = this.props.renderMenu(items, this.state.value, style)
     return React.cloneElement(menu, { ref: 'menu' })
@@ -298,7 +314,7 @@ let Autocomplete = React.createClass({
       })
     }
     return (
-      <div style={{display: 'inline-block'}}>
+      <div style={{display: 'inline-block', position: 'relative'}}>
         <input
           {...this.props.inputProps}
           role="combobox"