From 5f1244c171986f5317c869ca5f0e449cb776e28d Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Thu, 5 May 2016 00:28:32 +0300
Subject: [PATCH] Support mobile safari's broken offsets

1. Offset function as in jQuery
2. Position absolude instead of fixed
---
 lib/Autocomplete.js | 39 +++++++++++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/lib/Autocomplete.js b/lib/Autocomplete.js
index fd25a96d..796d508f 100644
--- a/lib/Autocomplete.js
+++ b/lib/Autocomplete.js
@@ -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
       }
@@ -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
     })
   },
 
@@ -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