From 2dc930bfe2b451df56a86fa90d7f4940d65a06e6 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 4 Jun 2022 08:15:43 -0700
Subject: [PATCH] fix: Context menus not scrollable on iOS (#3626)

closes #3588
---
 app/components/ContextMenu/index.tsx | 16 +++++++++++++++-
 package.json                         |  2 ++
 yarn.lock                            | 10 ++++++++++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/app/components/ContextMenu/index.tsx b/app/components/ContextMenu/index.tsx
index 04ccf1160..a5ab81df8 100644
--- a/app/components/ContextMenu/index.tsx
+++ b/app/components/ContextMenu/index.tsx
@@ -1,3 +1,4 @@
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Portal } from "react-portal";
@@ -92,6 +93,19 @@ const ContextMenu: React.FC<Props> = ({
     t,
   ]);
 
+  // We must manually manage scroll lock for iOS support so that the scrollable
+  // element can be passed into body-scroll-lock. See:
+  // https://github.com/ariakit/ariakit/issues/469
+  React.useEffect(() => {
+    const scrollElement = backgroundRef.current;
+    if (rest.visible && scrollElement) {
+      disableBodyScroll(scrollElement);
+    }
+    return () => {
+      scrollElement && enableBodyScroll(scrollElement);
+    };
+  }, [rest.visible]);
+
   // Perf win – don't render anything until the menu has been opened
   if (!rest.visible && !previousVisible) {
     return null;
@@ -101,7 +115,7 @@ const ContextMenu: React.FC<Props> = ({
   // trigger and the bottom of the window
   return (
     <>
-      <Menu hideOnClickOutside preventBodyScroll {...rest}>
+      <Menu hideOnClickOutside preventBodyScroll={false} {...rest}>
         {(props) => {
           // kind of hacky, but this is an effective way of telling which way
           // the menu will _actually_ be placed when taking into account screen
diff --git a/package.json b/package.json
index 119e1f796..305ac434c 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,7 @@
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-styled-components": "^1.11.1",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "body-scroll-lock": "^4.0.0-beta.0",
     "bull": "^3.29.0",
     "cancan": "3.1.0",
     "chalk": "^4.1.0",
@@ -212,6 +213,7 @@
     "@babel/preset-typescript": "^7.16.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
     "@relative-ci/agent": "^3.0.0",
+    "@types/body-scroll-lock": "^3.1.0",
     "@types/bull": "^3.15.5",
     "@types/crypto-js": "^4.1.0",
     "@types/datadog-metrics": "^0.6.2",
diff --git a/yarn.lock b/yarn.lock
index 73e446f7c..dad388065 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2649,6 +2649,11 @@
     "@types/connect" "*"
     "@types/node" "*"
 
+"@types/body-scroll-lock@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/body-scroll-lock/-/body-scroll-lock-3.1.0.tgz#435f6abf682bf58640e1c2ee5978320b891970e7"
+  integrity sha512-3owAC4iJub5WPqRhxd8INarF2bWeQq1yQHBgYhN0XLBJMpd5ED10RrJ3aKiAwlTyL5wK7RkBD4SZUQz2AAAMdA==
+
 "@types/bull@^3.15.5":
   version "3.15.5"
   resolved "https://registry.yarnpkg.com/@types/bull/-/bull-3.15.5.tgz#a4459c127c5b10fb847531579a2cd5db35751366"
@@ -4636,6 +4641,11 @@ body-scroll-lock@^3.1.5:
   resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz#c1392d9217ed2c3e237fee1e910f6cdd80b7aaec"
   integrity sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==
 
+body-scroll-lock@^4.0.0-beta.0:
+  version "4.0.0-beta.0"
+  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-4.0.0-beta.0.tgz#4f78789d10e6388115c0460cd6d7d4dd2bbc4f7e"
+  integrity sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==
+
 boolbase@^1.0.0, boolbase@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"