Context menu tweaks

Author: devklick

src/ContextMenu/ContextMenu.scss

@@ -1,3 +1,9 @@
 .context-menu {
   position: fixed;
+  // Kind of hacky - we need the context menu to always
+  // display on top of everything else. We could use the zIndex that's
+  // stored in global state, but this is fine for now.
+  // It will hit an issue in a very rare case, when window zindexes have
+  // been switched enough and the bordered app hits or exceeds this number.
+  z-index: 9999;
 }

src/ContextMenu/ContextMenu.tsx

@@ -1,7 +1,7 @@
 import { useRef } from "react";
 import MenuItems, { MenuItemProps } from "../components/MenuItems";
 import "./ContextMenu.scss";
-import useDetectClickOutside from "../hooks/useDetectClickOutside";
+import useDetectMouseDownOutside from "../hooks/useDetectMouseDownOutside";
 
 interface ContextMenuProps {
   items: Array<MenuItemProps>;
@@ -12,7 +12,7 @@ interface ContextMenuProps {
 function ContextMenu({ items, position, close }: ContextMenuProps) {
   const elementRef = useRef<HTMLDivElement>(null);
 
-  useDetectClickOutside({ elementRef, onClick: close });
+  useDetectMouseDownOutside({ elementRef, onMouseDown: close });
 
   return (
     <div

src/components/BorderedApp/BorderedAppMenu/BorderedAppMenu.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import "./BorderedAppMenu.scss";
-import useDetectClickOutside from "../../../hooks/useDetectClickOutside";
+import useDetectMouseDownOutside from "../../../hooks/useDetectMouseDownOutside";
 import MenuItems, { MenuItemProps } from "../../MenuItems";
 
 export interface BorderedAppMenuProps {
@@ -20,7 +20,7 @@ function BorderedAppMenu({ title, items }: BorderedAppMenuProps) {
   }, [elementRef]);
 
   // Close the menu if an outside click occurs
-  useDetectClickOutside({ elementRef, onClick: () => setOpen(false) });
+  useDetectMouseDownOutside({ elementRef, onMouseDown: () => setOpen(false) });
 
   return (
     <div

src/hooks/useDetectClickOutside.ts src/hooks/useDetectMouseDownOutside.tssrc/hooks/useDetectClickOutside.ts renamed to src/hooks/useDetectMouseDownOutside.ts

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 
-interface UseDetectClickOutsideProps<Element extends HTMLElement> {
+interface UseDetectMouseDownOutsideProps<Element extends HTMLElement> {
   /**
    * A reference to the top-most element./
    * Clicks on any parents of this element will trigger the callback.
@@ -12,18 +12,18 @@ interface UseDetectClickOutsideProps<Element extends HTMLElement> {
    * The callback to be invoked when a click
    * has been detected outside
    */
-  onClick: () => void;
+  onMouseDown: () => void;
 }
 
 /**
  * Detects a click that has occurred outside of the specified element.
  */
-function useDetectClickOutside<Element extends HTMLElement>({
+function useDetectMouseDownOutside<Element extends HTMLElement>({
   elementRef,
-  onClick,
-}: UseDetectClickOutsideProps<Element>) {
+  onMouseDown,
+}: UseDetectMouseDownOutsideProps<Element>) {
   useEffect(() => {
-    function clickHandler(e: MouseEvent) {
+    function handler(e: MouseEvent) {
       // If the element has been clicked on, we dont want to invoke the callback
       if (e.target === elementRef.current) return;
 
@@ -34,13 +34,13 @@ function useDetectClickOutside<Element extends HTMLElement>({
       }
 
       // Click must be outside, so invoke callback
-      onClick();
+      onMouseDown();
     }
 
-    window.addEventListener("click", clickHandler);
+    window.addEventListener("mousedown", handler);
 
-    return () => window.removeEventListener("click", clickHandler);
+    return () => window.removeEventListener("mousedown", handler);
   });
 }
 
-export default useDetectClickOutside;
+export default useDetectMouseDownOutside;