diff --git a/lib/Autocomplete.js b/lib/Autocomplete.js
index daceb0ed..4f448209 100644
--- a/lib/Autocomplete.js
+++ b/lib/Autocomplete.js
@@ -24,15 +24,16 @@ let Autocomplete = React.createClass({
return
},
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 heightBefore = inputTop;
+ var heightAfter = window.innerHeight - inputBottom;
+
+ 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 (
-