Fix menu rendering on when slightly off screen

Menu would bounce around in some cases because the
refreshPosition() would calculate different results
based on different state of the component and previous
render cycle CSS classes.

Also I found that the render function calls causes
in an infinite loop while open because of refreshPosition
will cause a state change which will rerender the function.
Fixed that with the shouldComponentUpdate which checks
if state has actually changed in between renders.

Signed-off-by: Juho Heikka <juho.heikka@gmail.com>

src/renderer/components/menu/menu.scss

@@ -35,14 +35,6 @@
   &.portal {
     left: -1000px;
     top: -1000px;
-
-    &.top {
-      margin-top: -$margin;
-    }
-
-    &.bottom {
-      margin-top: $margin;
-    }
   }
 
   &:not(.portal) {

src/renderer/components/menu/menu.tsx

@@ -26,6 +26,7 @@ import { createPortal } from "react-dom";
 import { autoBind, cssNames, noop } from "../../utils";
 import { Animate } from "../animate";
 import { Icon, IconProps } from "../icon";
+import isEqual from "lodash/isEqual";
 
 export const MenuContext = React.createContext<MenuContextValue>(null);
 export type MenuContextValue = Menu;
@@ -85,6 +86,10 @@ export class Menu extends React.Component<MenuProps, State> {
     return !!this.props.isOpen;
   }
 
+  shouldComponentUpdate(nextProps: MenuProps, nextState: State) {
+    return !isEqual(nextState, this.state) || !isEqual(nextProps, this.props);
+  }
+
   componentDidMount() {
     if (!this.props.usePortal) {
       const parent = this.elem.parentElement;
@@ -150,39 +155,42 @@ export class Menu extends React.Component<MenuProps, State> {
       return;
     }
 
-    const { width, height } = this.opener.getBoundingClientRect();
+    const openerClientRect = this.opener.getBoundingClientRect();
-    let { left, top, bottom, right } = this.opener.getBoundingClientRect();
+    let { left: openerLeft, top: openerTop, bottom: openerBottom, right: openerRight } = this.opener.getBoundingClientRect();
     const withScroll = window.getComputedStyle(this.elem).position !== "fixed";
 
     // window global scroll corrections
     if (withScroll) {
-      left += window.pageXOffset;
+      openerLeft += window.pageXOffset;
-      top += window.pageYOffset;
+      openerTop += window.pageYOffset;
-      right = left + width;
+      openerRight = openerLeft + openerClientRect.width;
-      bottom = top + height;
+      openerBottom = openerTop + openerClientRect.height;
     }
 
-    // setup initial position
+    const extraMargin = this.props.usePortal ? 8 : 0;
-    const position: MenuPosition = { left: true, bottom: true };
 
-    this.elem.style.left = `${left}px`;
+    const { width: menuWidth, height: menuHeight } = this.elem.getBoundingClientRect();
-    this.elem.style.top = `${bottom}px`;
 
-    // correct position if menu doesn't fit to viewport
+    const rightSideOfMenu = openerLeft + menuWidth;
-    const menuPos = this.elem.getBoundingClientRect();
+    const renderMenuLeft = rightSideOfMenu > window.innerWidth;
+    const menuOnLeftSidePosition = `${openerRight - this.elem.offsetWidth}px`;
+    const menuOnRightSidePosition = `${openerLeft}px`;
 
-    if (menuPos.right > window.innerWidth) {
+    this.elem.style.left = renderMenuLeft ? menuOnLeftSidePosition : menuOnRightSidePosition;
-      this.elem.style.left = `${right - this.elem.offsetWidth}px`;
-      position.right = true;
-      delete position.left;
-    }
 
-    if (menuPos.bottom > window.innerHeight) {
+    const bottomOfMenu = openerBottom + extraMargin + menuHeight;
-      this.elem.style.top = `${top - this.elem.offsetHeight}px`;
+    const renderMenuOnTop = bottomOfMenu > window.innerHeight;
-      position.top = true;
+    const menuOnTopPosition = `${openerTop - this.elem.offsetHeight - extraMargin}px`;
-      delete position.bottom;
+    const menuOnBottomPosition = `${openerBottom + extraMargin}px`;
-    }
+
-    this.setState({ position });
+    this.elem.style.top = renderMenuOnTop ? menuOnTopPosition : menuOnBottomPosition;
+
+    this.setState({ position: {
+      top: renderMenuOnTop,
+      bottom: !renderMenuOnTop,
+      left: renderMenuLeft,
+      right: !renderMenuLeft
+    } });
   };
 
   open() {