From 06b54eb074814a0ead9b89e9143872c7f92361da Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Wed, 2 Sep 2020 01:25:40 -0500
Subject: context menu bug fix

---
 src/client/views/ContextMenu.tsx     |  2 +-
 src/client/views/ContextMenuItem.tsx | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 349fd077c..952100cb0 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -215,7 +215,7 @@ export class ContextMenu extends React.Component {
 
     @computed get menuItems() {
         if (!this._searchString) {
-            return this._items.map(item => <ContextMenuItem {...item} key={item.description} closeMenu={this.closeMenu} />);
+            return this._items.map(item => <ContextMenuItem {...item} key={item.description} closeMenu={this.closeMenu} pageX={this.pageX} />);
         }
         return this.filteredViews;
     }
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index 7e3be0d61..7277c589d 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -4,6 +4,7 @@ import { observer } from "mobx-react";
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { UndoManager } from "../util/UndoManager";
+import { NumberLiteralType } from "typescript";
 
 export interface OriginalMenuProps {
     description: string;
@@ -28,6 +29,7 @@ export type ContextMenuProps = OriginalMenuProps | SubmenuProps;
 export class ContextMenuItem extends React.Component<ContextMenuProps & { selected?: boolean }> {
     @observable private _items: Array<ContextMenuProps> = [];
     @observable private overItem = false;
+    @observable private subRef = React.createRef<HTMLDivElement>();
 
     constructor(props: ContextMenuProps | SubmenuProps) {
         super(props);
@@ -61,7 +63,7 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select
             return;
         }
         this._overPosY = e.clientY;
-        this._overPosX = e.clientX
+        this._overPosX = e.clientX;
         this.currentTimeout = setTimeout(action(() => this.overItem = true), ContextMenuItem.timeout);
     }
 
@@ -97,9 +99,12 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select
             const where = !this.overItem ? "" : this._overPosY < window.innerHeight / 3 ? "flex-start" : this._overPosY > window.innerHeight * 2 / 3 ? "flex-end" : "center";
             const marginTop = !this.overItem ? "" : this._overPosY < window.innerHeight / 3 ? "20px" : this._overPosY > window.innerHeight * 2 / 3 ? "-20px" : "";
 
-            // this LINE!!
+            // here
             const submenu = !this.overItem ? (null) :
-                <div className="contextMenu-subMenu-cont" style={{ marginLeft: window.innerWidth < this._overPosX - 100 ? "90%" : "", left: "0px", marginTop }}>
+                <div className="contextMenu-subMenu-cont"
+                    style={{
+                        marginLeft: window.innerHeight - this._overPosX - 70 > 0 ? "90%" : "20%", marginTop
+                    }}>
                     {this._items.map(prop => <ContextMenuItem {...prop} key={prop.description} closeMenu={this.props.closeMenu} />)}
                 </div>;
             if (!("noexpand" in this.props)) {
-- 
cgit v1.2.3-70-g09d2