From 9dad08c45f4ae5e68763766b0cb5aa6a6cb259fd Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Tue, 27 Apr 2021 04:27:37 -0400
Subject: [PATCH] Asyncronously recompute the placement of an open <Menu>
 (#2631)

* Asyncronously recompute the placement of an open <Menu>

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix refreshPosition

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 src/renderer/components/menu/menu.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/menu/menu.tsx b/src/renderer/components/menu/menu.tsx
index 5e070698dd..f0d172b0d7 100644
--- a/src/renderer/components/menu/menu.tsx
+++ b/src/renderer/components/menu/menu.tsx
@@ -5,7 +5,6 @@ import { createPortal } from "react-dom";
 import { autobind, cssNames, noop } from "../../utils";
 import { Animate } from "../animate";
 import { Icon, IconProps } from "../icon";
-import debounce from "lodash/debounce";
 
 export const MenuContext = React.createContext<MenuContextValue>(null);
 export type MenuContextValue = Menu;
@@ -122,8 +121,11 @@ export class Menu extends React.Component<MenuProps, State> {
     }
   }
 
-  refreshPosition = debounce(() => {
-    if (!this.props.usePortal || !this.opener) return;
+  refreshPosition = () => {
+    if (!this.props.usePortal || !this.opener || !this.elem) {
+      return;
+    }
+
     const { width, height } = this.opener.getBoundingClientRect();
     let { left, top, bottom, right } = this.opener.getBoundingClientRect();
     const withScroll = window.getComputedStyle(this.elem).position !== "fixed";
@@ -157,7 +159,7 @@ export class Menu extends React.Component<MenuProps, State> {
       delete position.bottom;
     }
     this.setState({ position });
-  }, Animate.VISIBILITY_DELAY_MS);
+  };
 
   open() {
     if (this.isOpen) return;
@@ -248,6 +250,10 @@ export class Menu extends React.Component<MenuProps, State> {
   }
 
   render() {
+    if (this.isOpen) {
+      setImmediate(() => this.refreshPosition());
+    }
+
     const { position, id } = this.props;
     let { className, usePortal } = this.props;