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 ( -
+