From 286a15cf10a997e7b26b3c56e0aaadf26033f44a Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 4 Jul 2021 06:54:40 -0700
Subject: [PATCH] fix: Clicking dropdown menu items in FF (#2269)

* fix: Clicking dropdown menu items in FF
closes #2264

* fix: Anchor items, add comment

* fix: CI test memory issues
---
 app/components/ContextMenu/MenuItem.js | 15 +++++++++------
 package.json                           |  4 ++--
 yarn.lock                              |  8 ++++----
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/app/components/ContextMenu/MenuItem.js b/app/components/ContextMenu/MenuItem.js
index 7f2d0a8d3..e841949dd 100644
--- a/app/components/ContextMenu/MenuItem.js
+++ b/app/components/ContextMenu/MenuItem.js
@@ -26,16 +26,18 @@ const MenuItem = ({
   hide,
   ...rest
 }: Props) => {
-  const handleClick = React.useCallback(
+  // We bind to mousedown instead of onClick here as otherwise menu items do not
+  // work in Firefox which triggers the hideOnClickOutside handler first via
+  // mousedown.
+  const handleMouseDown = React.useCallback(
     (ev) => {
       if (onClick) {
+        ev.preventDefault();
+        ev.stopPropagation();
         onClick(ev);
       }
-      if (hide) {
-        hide();
-      }
     },
-    [hide, onClick]
+    [onClick]
   );
 
   return (
@@ -50,7 +52,8 @@ const MenuItem = ({
           {...props}
           $toggleable={selected !== undefined}
           as={onClick ? "button" : as}
-          onClick={handleClick}
+          onMouseDown={handleMouseDown}
+          onClick={hide}
         >
           {selected !== undefined && (
             <>
diff --git a/package.json b/package.json
index bf87b6072..86e541c0e 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "db:rollback": "sequelize db:migrate:undo",
     "upgrade": "git fetch && git pull && yarn install && yarn heroku-postbuild",
     "test": "yarn test:app && yarn test:server",
-    "test:app": "jest --config=app/.jestconfig.json",
+    "test:app": "jest --config=app/.jestconfig.json --runInBand --forceExit",
     "test:server": "jest --config=server/.jestconfig.json --runInBand --forceExit",
     "test:watch": "jest --config=server/.jestconfig.json --runInBand --forceExit --watchAll"
   },
@@ -140,7 +140,7 @@
     "react-virtualized-auto-sizer": "^1.0.5",
     "react-waypoint": "^10.1.0",
     "react-window": "^1.8.6",
-    "reakit": "^1.3.6",
+    "reakit": "^1.3.8",
     "regenerator-runtime": "^0.13.7",
     "rich-markdown-editor": "^11.13.0",
     "semver": "^7.3.2",
diff --git a/yarn.lock b/yarn.lock
index 5cfa5b64a..502650708 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11228,10 +11228,10 @@ reakit-warning@^0.6.1:
   dependencies:
     reakit-utils "^0.15.1"
 
-reakit@^1.3.6:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/reakit/-/reakit-1.3.6.tgz#0a58a1b5ba839b24cf722a5816efe72dc2240e7f"
-  integrity sha512-/I7XNPEUuRjCVwDkriy7HKuSKTtCmojZrrClGIg1gexB7Ij5vjpEbyUZzwHMmvIEoMqUZDC0Q6cDWfLpqaY9vA==
+reakit@^1.3.8:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/reakit/-/reakit-1.3.8.tgz#717e1a3b7cc6da803362a0edc2c55d2b6a001baf"
+  integrity sha512-8SVejx6FUaFi2+Q9eXoDAd4wWi/xAn6v8JgXH8x2xnzye8pb6v5bYvegACVpYVZnrS5w/JUgMTGh1Xy8MkkPww==
   dependencies:
     "@popperjs/core" "^2.5.4"
     body-scroll-lock "^3.1.5"