From baf6c37fe9505aaa1bd58faa6d9f4aa5b08e92db Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sat, 23 Jun 2018 22:59:55 -0700
Subject: [PATCH] Fix context menu positioning when scrolled

---
 CHANGELOG.md                       |  4 ++++
 js/components/ContextMenuTarget.js | 20 +++++++++++++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ffab1c16..0043e6b8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@
 
 Users can pass an initial layout (TODO: Documentation)
 
+### Fixes
+
+- Fixes positioning of context menus in context menu targets when they are spawned while scrolled.
+
 ## 1.1.1
 
 ### Fixes
diff --git a/js/components/ContextMenuTarget.js b/js/components/ContextMenuTarget.js
index 6851f5fd..a57069d4 100644
--- a/js/components/ContextMenuTarget.js
+++ b/js/components/ContextMenuTarget.js
@@ -34,11 +34,21 @@ export default class ContextMenuTarget extends React.Component {
     }
   }
 
+  _offset() {
+    if (!this.handleNode) {
+      return { top: 0, left: 0 };
+    }
+
+    const rect = this.handleNode.getBoundingClientRect();
+    const scrollLeft =
+      window.pageXOffset || document.documentElement.scrollLeft;
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    return { top: rect.top + scrollTop, left: rect.left + scrollLeft };
+  }
+
   render() {
     const { handle, children, top, bottom, ...passThroughProps } = this.props;
-    const rect = this.handleNode
-      ? this.handleNode.getBoundingClientRect()
-      : { top: 0, left: 0 };
+    const offset = this._offset();
     return (
       <div {...passThroughProps}>
         <div
@@ -51,8 +61,8 @@ export default class ContextMenuTarget extends React.Component {
         </div>
         <ContextMenu
           selected={this.state.selected}
-          offsetTop={rect.top}
-          offsetLeft={rect.left}
+          offsetTop={offset.top}
+          offsetLeft={offset.left}
           top={top}
           bottom={bottom}
         >