Skip to content
This repository was archived by the owner on Jul 19, 2019. It is now read-only.

Support mobile safari's broken offsets #100

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 35 additions & 4 deletions lib/Autocomplete.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ let Autocomplete = React.createClass({
background: 'rgba(255, 255, 255, 0.9)',
padding: '2px 0',
fontSize: '90%',
position: 'fixed',
position: 'absolute',
overflow: 'auto',
maxHeight: '50%', // TODO: don't cheat, let it flow to the bottom
}
Expand Down Expand Up @@ -231,15 +231,17 @@ let Autocomplete = React.createClass({

setMenuPositions () {
var node = this.refs.input
var rect = node.getBoundingClientRect()
var rect = this.getOffset(node)
var computedStyle = global.window.getComputedStyle(node)
var height = parseInt(computedStyle.height, 10) || 0;
var width = parseInt(computedStyle.width, 10) || 0;
var marginBottom = parseInt(computedStyle.marginBottom, 10) || 0;
var marginLeft = parseInt(computedStyle.marginLeft, 10) || 0;
var marginRight = parseInt(computedStyle.marginRight, 10) || 0;
this.setState({
menuTop: rect.bottom + marginBottom,
menuTop: rect.top + height + marginBottom,
menuLeft: rect.left + marginLeft,
menuWidth: rect.width + marginLeft + marginRight
menuWidth: width + marginLeft + marginRight
})
},

Expand Down Expand Up @@ -305,6 +307,35 @@ let Autocomplete = React.createClass({
if (this.state.isOpen === false)
this.setState({ isOpen: true })
},

getOffset(elem) {
if ( !elem ) {
return;
}

// Support: IE <=11 only
// Running getBoundingClientRect on a
// disconnected node in IE throws an error
if ( !elem.getClientRects().length ) {
return { top: 0, left: 0 };
}

var rect = elem.getBoundingClientRect();

// Make sure element is not hidden (display: none)
if ( rect.width || rect.height ) {
var doc = elem.ownerDocument;
var docElem = doc.documentElement;

return {
top: rect.top + global.window.pageYOffset - docElem.clientTop,
left: rect.left + global.window.pageXOffset - docElem.clientLeft
};
}

// Return zeros for disconnected and hidden elements (gh-2310)
return rect;
},

render () {
if (this.props.debug) { // you don't like it, you love it
Expand Down