From 4412a1f86d3f1e4050861c70eb6daca0662f279d Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Fri, 28 Apr 2023 11:48:34 -0700
Subject: [PATCH] Fix `scrollLock` causing nested popovers to be unable to
 scroll in Kibana

- using a workaround recommended by `react-focus-on`'s author
---
 package.json                             |  1 +
 src/components/focus_trap/focus_trap.tsx | 15 +++++++++++++--
 yarn.lock                                |  2 +-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 5934f9ad22a..4fb3270dfb8 100644
--- a/package.json
+++ b/package.json
@@ -80,6 +80,7 @@
     "react-focus-on": "^3.7.0",
     "react-input-autosize": "^3.0.0",
     "react-is": "^17.0.2",
+    "react-remove-scroll-bar": "^2.3.4",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.6",
     "refractor": "^3.5.0",
diff --git a/src/components/focus_trap/focus_trap.tsx b/src/components/focus_trap/focus_trap.tsx
index 6619c90ac6f..69b41f66546 100644
--- a/src/components/focus_trap/focus_trap.tsx
+++ b/src/components/focus_trap/focus_trap.tsx
@@ -9,6 +9,7 @@
 import React, { Component, CSSProperties } from 'react';
 import { FocusOn } from 'react-focus-on';
 import { ReactFocusOnProps } from 'react-focus-on/dist/es5/types';
+import { RemoveScrollBar } from 'react-remove-scroll-bar';
 
 import { CommonProps } from '../common';
 import { findElementBySelectorOrRef, ElementTarget } from '../../services';
@@ -124,11 +125,21 @@ export class EuiFocusTrap extends Component<EuiFocusTrapProps, State> {
     const focusOnProps = {
       returnFocus,
       noIsolation,
-      scrollLock,
       enabled: !isDisabled,
       ...rest,
       onClickOutside: this.handleOutsideClick,
+      /**
+       * `scrollLock` should always be unset on FocusOn, as it can prevent scrolling on
+       * portals (i.e. popovers, comboboxes, dropdown menus, etc.) within modals & flyouts
+       * @see https://github.com/theKashey/react-focus-on/issues/49
+       */
+      scrollLock: false,
     };
-    return <FocusOn {...focusOnProps}>{children}</FocusOn>;
+    return (
+      <FocusOn {...focusOnProps}>
+        {children}
+        {scrollLock && <RemoveScrollBar />}
+      </FocusOn>
+    );
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 343a9ccc39f..c7a2e333dfe 100755
--- a/yarn.lock
+++ b/yarn.lock
@@ -14450,7 +14450,7 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
-react-remove-scroll-bar@^2.3.3:
+react-remove-scroll-bar@^2.3.3, react-remove-scroll-bar@^2.3.4:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
   integrity sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==