Merge branch 'master' into linking-anh

1 files changed, 22 insertions, 13 deletions

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index c4fabbf99..80ff16cf9 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -26,8 +26,7 @@ export class ContextMenu extends React.Component {
     @observable private _mouseX: number = -1;
     @observable private _mouseY: number = -1;
     @observable private _shouldDisplay: boolean = false;
-    @observable private _mouseDown: boolean = false;
-
+    private _ignoreUp = false;
     private _reactionDisposer?: IReactionDisposer;
 
     constructor(props: Readonly<{}>) {
@@ -36,27 +35,39 @@ export class ContextMenu extends React.Component {
         ContextMenu.Instance = this;
     }
 
+    public setIgnoreEvents(ignore: boolean) {
+        this._ignoreUp = ignore;
+    }
+
     @action
     onPointerDown = (e: PointerEvent) => {
-        this._mouseDown = true;
         this._mouseX = e.clientX;
         this._mouseY = e.clientY;
     }
     @action
     onPointerUp = (e: PointerEvent) => {
-        this._mouseDown = false;
         const curX = e.clientX;
         const curY = e.clientY;
-        if (this._mouseX !== curX || this._mouseY !== curY) {
+        if (this._ignoreUp) {
+            this._ignoreUp = false;
+            return;
+        }
+        if (Math.abs(this._mouseX - curX) > 1 || Math.abs(this._mouseY - curY) > 1) {
             this._shouldDisplay = false;
         }
 
-        this._shouldDisplay && (this._display = true);
+        if (this._shouldDisplay) {
+            if (this._onDisplay) {
+                this._onDisplay();
+            } else {
+                this._display = true;
+            }
+        }
     }
     componentWillUnmount() {
         document.removeEventListener("pointerdown", this.onPointerDown);
         document.removeEventListener("pointerup", this.onPointerUp);
-        this._reactionDisposer && this._reactionDisposer();
+        this._reactionDisposer?.();
     }
 
     @action
@@ -64,10 +75,6 @@ export class ContextMenu extends React.Component {
         document.addEventListener("pointerdown", this.onPointerDown);
         document.addEventListener("pointerup", this.onPointerUp);
 
-        this._reactionDisposer = reaction(
-            () => this._shouldDisplay,
-            () => this._shouldDisplay && !this._mouseDown && runInAction(() => this._display = true)
-        );
     }
 
     @action
@@ -138,9 +145,9 @@ export class ContextMenu extends React.Component {
         return y;
     }
 
-
+    _onDisplay?: () => void = undefined;
     @action
-    displayMenu = (x: number, y: number, initSearch = "", showSearch = false) => {
+    displayMenu = (x: number, y: number, initSearch = "", showSearch = false, onDisplay?: () => void) => {
         //maxX and maxY will change if the UI/font size changes, but will work for any amount
         //of items added to the menu
 
@@ -149,6 +156,8 @@ export class ContextMenu extends React.Component {
         this._pageY = y;
         this._searchString = initSearch;
         this._shouldDisplay = true;
+        this._onDisplay = onDisplay;
+        this._display = !onDisplay;
     }
 
     @action