From d8b33629ef31eb18963bb4418c47883bc0acb2c3 Mon Sep 17 00:00:00 2001
From: Constance <constancecchen@users.noreply.github.com>
Date: Wed, 16 Nov 2022 09:58:53 -0800
Subject: [PATCH] [EuiModal] Permanently fix `EuiModal` to scroll-jumping
 issues, remove temporary workaround (#6360)

* Update react-focus-on

* Remove old scroll workaround and use new react-focus-on API

* [misc] remove old/outdated comment

* changelog

* Update snapshot changes (caused by react-focus-on upgrade?)
---
 package.json                                  |   2 +-
 .../collapsible_nav.test.tsx.snap             |  45 ------
 .../__snapshots__/data_grid.test.tsx.snap     |  50 -------
 .../keyboard_shortcuts.test.tsx.snap          |  16 +--
 .../flyout/__snapshots__/flyout.test.tsx.snap | 120 ----------------
 .../__snapshots__/focus_trap.test.tsx.snap    |  15 --
 .../__snapshots__/super_select.test.tsx.snap  |  40 ------
 .../__snapshots__/confirm_modal.test.tsx.snap |  22 ---
 .../modal/__snapshots__/modal.test.tsx.snap   |  16 +--
 src/components/modal/modal.test.tsx           |  24 ----
 src/components/modal/modal.tsx                |  27 +---
 .../__snapshots__/popover.rtl.test.tsx.snap   |   5 -
 .../__snapshots__/popover.test.tsx.snap       |  65 ---------
 .../__snapshots__/tour_step.test.tsx.snap     |  25 ----
 upcoming_changelogs/6360.md                   |   3 +
 yarn.lock                                     | 129 +++++++++---------
 16 files changed, 76 insertions(+), 528 deletions(-)
 create mode 100644 upcoming_changelogs/6360.md

diff --git a/package.json b/package.json
index 5b15efd67ee..e02551433a4 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,7 @@
     "react-beautiful-dnd": "^13.1.0",
     "react-dropzone": "^11.5.3",
     "react-element-to-jsx-string": "^14.3.4",
-    "react-focus-on": "^3.5.4",
+    "react-focus-on": "^3.7.0",
     "react-input-autosize": "^3.0.0",
     "react-is": "^17.0.2",
     "react-virtualized-auto-sizer": "^1.0.6",
diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
index 117ec48fcc9..bae474c35c2 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -8,11 +8,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -56,11 +51,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -103,11 +93,6 @@ Array [
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"
   />,
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="1"
-  />,
   <div
     data-focus-lock-disabled="false"
   >
@@ -153,11 +138,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -199,11 +179,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -239,11 +214,6 @@ Array [
 
 exports[`EuiCollapsibleNav props isDocked 1`] = `
 Array [
-  <div
-    data-focus-guard="true"
-    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="-1"
-  />,
   <div
     data-focus-guard="true"
     style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -275,11 +245,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -325,11 +290,6 @@ Array [
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
   />,
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />,
   <div
     data-focus-lock-disabled="disabled"
   >
@@ -356,11 +316,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 7223dba7ccc..fe51a6c7c16 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -456,11 +456,6 @@ exports[`EuiDataGrid render column actions renders various column actions config
 
 exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
 Array [
-  <div
-    data-focus-guard="true"
-    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="-1"
-  />,
   <div
     data-focus-guard="true"
     style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -927,11 +922,6 @@ Array [
 
 exports[`EuiDataGrid rendering renders control columns 1`] = `
 Array [
-  <div
-    data-focus-guard="true"
-    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="-1"
-  />,
   <div
     data-focus-guard="true"
     style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -1235,11 +1225,6 @@ Array [
               style="position:absolute;left:0;top:0;height:34px;width:50px"
               tabindex="-1"
             >
-              <div
-                data-focus-guard="true"
-                style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                tabindex="-1"
-              />
               <div
                 data-focus-guard="true"
                 style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -1350,11 +1335,6 @@ Array [
               style="position:absolute;left:250px;top:0;height:34px;width:50px"
               tabindex="-1"
             >
-              <div
-                data-focus-guard="true"
-                style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                tabindex="-1"
-              />
               <div
                 data-focus-guard="true"
                 style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -1401,11 +1381,6 @@ Array [
               style="position:absolute;left:0;top:0;height:34px;width:50px"
               tabindex="-1"
             >
-              <div
-                data-focus-guard="true"
-                style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                tabindex="-1"
-              />
               <div
                 data-focus-guard="true"
                 style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -1516,11 +1491,6 @@ Array [
               style="position:absolute;left:250px;top:0;height:34px;width:50px"
               tabindex="-1"
             >
-              <div
-                data-focus-guard="true"
-                style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                tabindex="-1"
-              />
               <div
                 data-focus-guard="true"
                 style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -1567,11 +1537,6 @@ Array [
               style="position:absolute;left:0;top:0;height:34px;width:50px"
               tabindex="-1"
             >
-              <div
-                data-focus-guard="true"
-                style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                tabindex="-1"
-              />
               <div
                 data-focus-guard="true"
                 style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -1682,11 +1647,6 @@ Array [
               style="position:absolute;left:250px;top:0;height:34px;width:50px"
               tabindex="-1"
             >
-              <div
-                data-focus-guard="true"
-                style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                tabindex="-1"
-              />
               <div
                 data-focus-guard="true"
                 style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -1742,11 +1702,6 @@ Array [
 
 exports[`EuiDataGrid rendering renders custom column headers 1`] = `
 Array [
-  <div
-    data-focus-guard="true"
-    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="-1"
-  />,
   <div
     data-focus-guard="true"
     style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -2212,11 +2167,6 @@ Array [
 
 exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
 Array [
-  <div
-    data-focus-guard="true"
-    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="-1"
-  />,
   <div
     data-focus-guard="true"
     style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
diff --git a/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap
index 1d8a65d631b..a1c228f1642 100644
--- a/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap
+++ b/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap
@@ -2,10 +2,7 @@
 
 exports[`useDataGridKeyboardShortcuts returns a popover containing a list of keyboard shortcuts 1`] = `
 <body>
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-  >
+  <div>
     <div
       class="euiPopover euiPopover-isOpen emotion-euiPopover"
       data-test-subj="dataGridKeyboardShortcutsPopover"
@@ -37,19 +34,10 @@ exports[`useDataGridKeyboardShortcuts returns a popover containing a list of key
     data-euiportal="true"
   >
     <div
-      aria-hidden="true"
-      data-aria-hidden="true"
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      aria-hidden="true"
-      data-aria-hidden="true"
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -252,8 +240,6 @@ exports[`useDataGridKeyboardShortcuts returns a popover containing a list of key
       </div>
     </div>
     <div
-      aria-hidden="true"
-      data-aria-hidden="true"
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
index d86fd5482a7..524fc24cda4 100644
--- a/src/components/flyout/__snapshots__/flyout.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
@@ -8,11 +8,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -55,11 +50,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -101,11 +91,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -146,11 +131,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -191,11 +171,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -222,11 +197,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -267,11 +237,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -313,11 +278,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -359,11 +319,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -404,11 +359,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -449,11 +399,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -493,11 +438,6 @@ Array [
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"
   />,
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="1"
-  />,
   <div
     data-focus-lock-disabled="false"
   >
@@ -537,11 +477,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -582,11 +517,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -627,11 +557,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -672,11 +597,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -717,11 +637,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -761,11 +676,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -806,11 +716,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -851,11 +756,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -897,11 +797,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -942,11 +837,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -987,11 +877,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -1026,11 +911,6 @@ Array [
 
 exports[`EuiFlyout props type=push is rendered 1`] = `
 Array [
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />,
   <div
     data-focus-guard="true"
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
diff --git a/src/components/focus_trap/__snapshots__/focus_trap.test.tsx.snap b/src/components/focus_trap/__snapshots__/focus_trap.test.tsx.snap
index 92691319f29..c7350bc8eb1 100644
--- a/src/components/focus_trap/__snapshots__/focus_trap.test.tsx.snap
+++ b/src/components/focus_trap/__snapshots__/focus_trap.test.tsx.snap
@@ -2,11 +2,6 @@
 
 exports[`EuiFocusTrap accepts className and style 1`] = `
 Array [
-  <div
-    data-focus-guard="true"
-    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="-1"
-  />,
   <div
     data-focus-guard="true"
     style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -29,11 +24,6 @@ Array [
 
 exports[`EuiFocusTrap can be disabled 1`] = `
 Array [
-  <div
-    data-focus-guard="true"
-    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="-1"
-  />,
   <div
     data-focus-guard="true"
     style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -59,11 +49,6 @@ Array [
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"
   />,
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="1"
-  />,
   <div
     data-focus-lock-disabled="false"
   >
diff --git a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
index 17abea08ee7..48224aab1ca 100644
--- a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
+++ b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
@@ -154,11 +154,6 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
   />
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
   <div
     data-focus-lock-disabled="disabled"
   >
@@ -176,11 +171,6 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
           style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
           tabindex="0"
         />
-        <div
-          data-focus-guard="true"
-          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-          tabindex="1"
-        />
         <div
           data-focus-lock-disabled="false"
         >
@@ -427,11 +417,6 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
   />
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
   <div
     data-focus-lock-disabled="disabled"
   >
@@ -449,11 +434,6 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
           style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
           tabindex="0"
         />
-        <div
-          data-focus-guard="true"
-          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-          tabindex="1"
-        />
         <div
           data-focus-lock-disabled="false"
         >
@@ -589,11 +569,6 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
   />
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
   <div
     data-focus-lock-disabled="disabled"
   >
@@ -611,11 +586,6 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
           style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
           tabindex="0"
         />
-        <div
-          data-focus-guard="true"
-          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-          tabindex="1"
-        />
         <div
           data-focus-lock-disabled="false"
         >
@@ -750,11 +720,6 @@ exports[`EuiSuperSelect props renders popoverProps on the underlying EuiPopover
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
   />
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
   <div
     data-focus-lock-disabled="disabled"
   >
@@ -772,11 +737,6 @@ exports[`EuiSuperSelect props renders popoverProps on the underlying EuiPopover
           style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
           tabindex="0"
         />
-        <div
-          data-focus-guard="true"
-          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-          tabindex="1"
-        />
         <div
           data-focus-lock-disabled="false"
         >
diff --git a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
index 6f4d9753a48..4ce8f887999 100644
--- a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
@@ -3,19 +3,10 @@
 exports[`EuiConfirmModal renders EuiConfirmModal 1`] = `
 Array [
   <div
-    aria-hidden="true"
-    data-aria-hidden="true"
     data-focus-guard="true"
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"
   />,
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="1"
-  />,
   <div
     data-focus-lock-disabled="false"
   >
@@ -102,8 +93,6 @@ Array [
     </div>
   </div>,
   <div
-    aria-hidden="true"
-    data-aria-hidden="true"
     data-focus-guard="true"
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"
@@ -114,19 +103,10 @@ Array [
 exports[`EuiConfirmModal renders EuiConfirmModal without EuiModalBody, if empty 1`] = `
 Array [
   <div
-    aria-hidden="true"
-    data-aria-hidden="true"
     data-focus-guard="true"
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"
   />,
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="1"
-  />,
   <div
     data-focus-lock-disabled="false"
   >
@@ -197,8 +177,6 @@ Array [
     </div>
   </div>,
   <div
-    aria-hidden="true"
-    data-aria-hidden="true"
     data-focus-guard="true"
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"
diff --git a/src/components/modal/__snapshots__/modal.test.tsx.snap b/src/components/modal/__snapshots__/modal.test.tsx.snap
index 4ef88e6cd23..3769c2c754d 100644
--- a/src/components/modal/__snapshots__/modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal.test.tsx.snap
@@ -2,29 +2,17 @@
 
 exports[`EuiModal renders 1`] = `
 <body>
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-  />
+  <div />
   <div
     class="euiOverlayMask emotion-euiOverlayMask-aboveHeader"
     data-euiportal="true"
     data-relative-to-header="above"
   >
     <div
-      aria-hidden="true"
-      data-aria-hidden="true"
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      aria-hidden="true"
-      data-aria-hidden="true"
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -50,8 +38,6 @@ exports[`EuiModal renders 1`] = `
       </div>
     </div>
     <div
-      aria-hidden="true"
-      data-aria-hidden="true"
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
diff --git a/src/components/modal/modal.test.tsx b/src/components/modal/modal.test.tsx
index 9f313d15a6c..01505752296 100644
--- a/src/components/modal/modal.test.tsx
+++ b/src/components/modal/modal.test.tsx
@@ -7,7 +7,6 @@
  */
 
 import React from 'react';
-import { fireEvent } from '@testing-library/dom';
 import { render } from '../../test/rtl';
 import { requiredProps } from '../../test';
 
@@ -24,27 +23,4 @@ describe('EuiModal', () => {
     // NOTE: Using baseElement instead of container is required for components that use portals
     expect(baseElement).toMatchSnapshot();
   });
-
-  // TODO: Remove this onFocus scroll workaround after react-focus-on supports focusOptions
-  // @see https://github.com/elastic/eui/issues/6304
-  describe('focus/scroll workaround', () => {
-    it('scrolls back to the original window position on initial modal focus', () => {
-      window.scrollTo = jest.fn();
-
-      const { getByTestSubject } = render(
-        <EuiModal data-test-subj="modal" onClose={() => {}}>
-          children
-        </EuiModal>
-      );
-
-      // For whatever reason, react-focus-lock doesn't appear to trigger focus in RTL so we'll do it manually
-      fireEvent.focusIn(getByTestSubject('modal'));
-      // Confirm that scrolling does not occur more than once
-      fireEvent.focusIn(getByTestSubject('modal'));
-      fireEvent.focusIn(getByTestSubject('modal'));
-
-      expect(window.scrollTo).toHaveBeenCalledTimes(1);
-      jest.restoreAllMocks();
-    });
-  });
 });
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index 50d99879725..231f0de0b3d 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -6,13 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, {
-  FunctionComponent,
-  ReactNode,
-  HTMLAttributes,
-  useRef,
-  useCallback,
-} from 'react';
+import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
 import classnames from 'classnames';
 
 import { keys } from '../../services';
@@ -58,18 +52,6 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
   style,
   ...rest
 }) => {
-  // TODO: Remove this onFocus scroll workaround after react-focus-on supports focusOptions
-  // @see https://github.com/elastic/eui/issues/6304
-  const bodyScrollTop = useRef<undefined | number>(
-    typeof window === 'undefined' ? undefined : window.scrollY // Account for SSR
-  );
-  const onFocus = useCallback(() => {
-    if (bodyScrollTop.current != null) {
-      window.scrollTo({ top: bodyScrollTop.current });
-      bodyScrollTop.current = undefined; // Unset after first auto focus
-    }
-  }, []);
-
   const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     if (event.key === keys.ESCAPE) {
       event.preventDefault();
@@ -91,16 +73,11 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
 
   return (
     <EuiOverlayMask>
-      <EuiFocusTrap initialFocus={initialFocus} scrollLock>
-        {
-          // Create a child div instead of applying these props directly to FocusTrap, or else
-          // fallbackFocus won't work.
-        }
+      <EuiFocusTrap initialFocus={initialFocus} scrollLock preventScrollOnFocus>
         <div
           className={classes}
           onKeyDown={onKeyDown}
           tabIndex={0}
-          onFocus={onFocus}
           style={newStyle || style}
           {...rest}
         >
diff --git a/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap b/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap
index dfb5cf0e586..406b3163813 100644
--- a/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap
+++ b/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap
@@ -34,11 +34,6 @@ exports[`EuiPopover snapshot testing renders with popover contents 1`] = `
   <div
     data-euiportal="true"
   >
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
diff --git a/src/components/popover/__snapshots__/popover.test.tsx.snap b/src/components/popover/__snapshots__/popover.test.tsx.snap
index b0458f3bff7..16fe0321a98 100644
--- a/src/components/popover/__snapshots__/popover.test.tsx.snap
+++ b/src/components/popover/__snapshots__/popover.test.tsx.snap
@@ -95,11 +95,6 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -156,11 +151,6 @@ exports[`EuiPopover props buffer 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -215,11 +205,6 @@ exports[`EuiPopover props buffer for all sides 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -287,11 +272,6 @@ exports[`EuiPopover props focusTrapProps is rendered 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -359,11 +339,6 @@ exports[`EuiPopover props isOpen renders true 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -418,11 +393,6 @@ exports[`EuiPopover props offset with arrow 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -477,11 +447,6 @@ exports[`EuiPopover props offset without arrow 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -531,11 +496,6 @@ exports[`EuiPopover props ownFocus defaults to true 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -590,11 +550,6 @@ exports[`EuiPopover props ownFocus renders false 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -640,11 +595,6 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -699,11 +649,6 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -758,11 +703,6 @@ exports[`EuiPopover props panelProps is rendered 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -818,11 +758,6 @@ exports[`EuiPopover props popoverScreenReaderText 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
diff --git a/src/components/tour/__snapshots__/tour_step.test.tsx.snap b/src/components/tour/__snapshots__/tour_step.test.tsx.snap
index d79bb7c0111..acbf0c7ca91 100644
--- a/src/components/tour/__snapshots__/tour_step.test.tsx.snap
+++ b/src/components/tour/__snapshots__/tour_step.test.tsx.snap
@@ -32,11 +32,6 @@ exports[`EuiTourStep can change the minWidth and maxWidth 1`] = `
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
   />
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
   <div
     data-focus-lock-disabled="disabled"
   >
@@ -135,11 +130,6 @@ exports[`EuiTourStep can have subtitle 1`] = `
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
   />
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
   <div
     data-focus-lock-disabled="disabled"
   >
@@ -243,11 +233,6 @@ exports[`EuiTourStep can override the footer action 1`] = `
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
   />
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
   <div
     data-focus-lock-disabled="disabled"
   >
@@ -335,11 +320,6 @@ exports[`EuiTourStep can turn off the beacon 1`] = `
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
   />
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
   <div
     data-focus-lock-disabled="disabled"
   >
@@ -433,11 +413,6 @@ exports[`EuiTourStep is rendered 1`] = `
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
   />
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
   <div
     data-focus-lock-disabled="disabled"
   >
diff --git a/upcoming_changelogs/6360.md b/upcoming_changelogs/6360.md
new file mode 100644
index 00000000000..3ebce21eab4
--- /dev/null
+++ b/upcoming_changelogs/6360.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Permanently fixed `EuiModal` to not cause scroll-jumping issues on modal open
diff --git a/yarn.lock b/yarn.lock
index 382ee083e16..04864e1554e 100755
--- a/yarn.lock
+++ b/yarn.lock
@@ -3322,12 +3322,12 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-aria-hidden@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.1.3.tgz#bb48de18dc84787a3c6eee113709c473c64ec254"
-  integrity sha512-RhVWFtKH5BiGMycI72q2RAFMLQi8JP9bLuQXgR5a8Znp7P5KOIADSJeyfI8PCVxLEp067B2HbP5JIiI/PXIZeA==
+aria-hidden@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.2.tgz#8c4f7cc88d73ca42114106fdf6f47e68d31475b8"
+  integrity sha512-6y/ogyDTk/7YAe91T3E2PR1ALVKyM2QbTio5HwM+N1Q6CMlCKhvClyIjkckBswa0f2xJhjsfzIGa1yVSe1UMVA==
   dependencies:
-    tslib "^1.0.0"
+    tslib "^2.0.0"
 
 aria-query@^4.2.2:
   version "4.2.2"
@@ -7827,10 +7827,10 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.1"
     readable-stream "^2.0.4"
 
-focus-lock@^0.10.1:
-  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.10.1.tgz#5f46fa74fefb87144479c2f8e276f0eedd8081b2"
-  integrity sha512-b9yUklCi4fTu2GXn7dnaVf4hiLVVBp7xTiZarAHMODV2To6Bitf6F/UI67RmKbdgJQeVwI1UO0d9HYNbXt3GkA==
+focus-lock@^0.11.2:
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.11.3.tgz#c094e8f109d780f56038abdeec79328fd56b627f"
+  integrity sha512-4n0pYcPTa/uI7Q66BZna61nRT7lDhnuJ9PJr6wiDjx4uStg491ks41y7uOG+s0umaaa+hulNKSldU9aTg9/yVg==
   dependencies:
     tslib "^2.0.3"
 
@@ -14444,10 +14444,10 @@ react-beautiful-dnd@^13.1.0:
     redux "^4.0.4"
     use-memo-one "^1.1.1"
 
-react-clientside-effect@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.5.tgz#e2c4dc3c9ee109f642fac4f5b6e9bf5bcd2219a3"
-  integrity sha512-2bL8qFW1TGBHozGGbVeyvnggRpMjibeZM2536AKNENLECutp2yfs44IL8Hmpn8qjFQ2K7A9PnYf3vc7aQq/cPA==
+react-clientside-effect@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz#29f9b14e944a376b03fb650eed2a754dd128ea3a"
+  integrity sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==
   dependencies:
     "@babel/runtime" "^7.12.13"
 
@@ -14495,30 +14495,30 @@ react-fast-compare@^3.1.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
-react-focus-lock@^2.6.0:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.7.1.tgz#a9fbb3fa4efaee32162406e5eb96ae658964193b"
-  integrity sha512-ImSeVmcrLKNMqzUsIdqOkXwTVltj79OPu43oT8tVun7eIckA4VdM7UmYUFo3H/UC2nRVgagMZGFnAOQEDiDYcA==
+react-focus-lock@^2.9.2:
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.9.2.tgz#a57dfd7c493e5a030d87f161c96ffd082bd920f2"
+  integrity sha512-5JfrsOKyA5Zn3h958mk7bAcfphr24jPoMoznJ8vaJF6fUrPQ8zrtEd3ILLOK8P5jvGxdMd96OxWNjDzATfR2qw==
   dependencies:
     "@babel/runtime" "^7.0.0"
-    focus-lock "^0.10.1"
+    focus-lock "^0.11.2"
     prop-types "^15.6.2"
-    react-clientside-effect "^1.2.5"
-    use-callback-ref "^1.2.5"
-    use-sidecar "^1.0.5"
+    react-clientside-effect "^1.2.6"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
 
-react-focus-on@^3.5.4:
-  version "3.5.4"
-  resolved "https://registry.yarnpkg.com/react-focus-on/-/react-focus-on-3.5.4.tgz#be45a9d0495f3bb6f5249704c85362df94980ecf"
-  integrity sha512-HnU0YGKhNSUsC4k6K8L+2wk8mC/qdg+CsS7A1bWLMgK7UuBphdECs2esnS6cLmBoVNjsFnCm/vMypeezKOdK3A==
+react-focus-on@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/react-focus-on/-/react-focus-on-3.7.0.tgz#bf782b51483d52d1d336b7b09cb864897af26cdf"
+  integrity sha512-TsCnbJr4qjqFatJ4U1N8qGSZH+FUzxJ5mJ5ta7TY2YnDmUbGGmcvZMTZgGjQ1fl6vlztsMyg6YyZlPAeeIhEUg==
   dependencies:
-    aria-hidden "^1.1.3"
-    react-focus-lock "^2.6.0"
-    react-remove-scroll "^2.4.1"
-    react-style-singleton "^2.1.1"
+    aria-hidden "^1.2.2"
+    react-focus-lock "^2.9.2"
+    react-remove-scroll "^2.5.5"
+    react-style-singleton "^2.2.0"
     tslib "^2.3.1"
-    use-callback-ref "^1.2.5"
-    use-sidecar "^1.0.5"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
 
 react-helmet@^6.1.0:
   version "6.1.0"
@@ -14564,24 +14564,24 @@ 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.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.1.0.tgz#edafe9b42a42c0dad9bdd10712772a1f9a39d7b9"
-  integrity sha512-5X5Y5YIPjIPrAoMJxf6Pfa7RLNGCgwZ95TdnVPgPuMftRfO8DaC7F4KP1b5eiO8hHbe7u+wZNDbYN5WUTpv7+g==
+react-remove-scroll-bar@^2.3.3:
+  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==
   dependencies:
-    react-style-singleton "^2.1.0"
-    tslib "^1.0.0"
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
 
-react-remove-scroll@^2.4.1:
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.4.3.tgz#83d19b02503b04bd8141ed6e0b9e6691a2e935a6"
-  integrity sha512-lGWYXfV6jykJwbFpsuPdexKKzp96f3RbvGapDSIdcyGvHb7/eqyn46C7/6h+rUzYar1j5mdU+XECITHXCKBk9Q==
+react-remove-scroll@^2.5.5:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz#1e31a1260df08887a8a0e46d09271b52b3a37e77"
+  integrity sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==
   dependencies:
-    react-remove-scroll-bar "^2.1.0"
-    react-style-singleton "^2.1.0"
-    tslib "^1.0.0"
-    use-callback-ref "^1.2.3"
-    use-sidecar "^1.0.1"
+    react-remove-scroll-bar "^2.3.3"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
 
 react-router-dom@^5.2.0:
   version "5.2.0"
@@ -14635,14 +14635,14 @@ react-simple-code-editor@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.11.3.tgz#6e5af1c2e51588aded2c89b86e98fac144212f61"
   integrity sha512-7bVI4Yd1aNCeuldErXUt8ksaAG5Fi+GZ6vp3mtFBnckKdzsQtrgkDvdwMFXIhwTGG+mUYmk5ZpMo0axSW9JBzA==
 
-react-style-singleton@^2.1.0, react-style-singleton@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.1.tgz#ce7f90b67618be2b6b94902a30aaea152ce52e66"
-  integrity sha512-jNRp07Jza6CBqdRKNgGhT3u9umWvils1xsuMOjZlghBDH2MU0PL2WZor4PGYjXpnRCa9DQSlHMs/xnABWOwYbA==
+react-style-singleton@^2.2.0, react-style-singleton@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
+  integrity sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==
   dependencies:
     get-nonce "^1.0.0"
     invariant "^2.2.4"
-    tslib "^1.0.0"
+    tslib "^2.0.0"
 
 react-test-renderer@^17.0.0:
   version "17.0.2"
@@ -17336,11 +17336,16 @@ tsconfig-paths@^3.9.0:
     minimist "^1.2.0"
     strip-bom "^3.0.0"
 
-tslib@^1.0.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.1, tslib@^1.9.3:
+tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.1, tslib@^1.9.3:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
   integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
 
+tslib@^2.0.0, tslib@^2.1.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
+  integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
+
 tslib@^2.0.3, tslib@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
@@ -17838,23 +17843,25 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
-use-callback-ref@^1.2.3, use-callback-ref@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.5.tgz#6115ed242cfbaed5915499c0a9842ca2912f38a5"
-  integrity sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==
+use-callback-ref@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.0.tgz#772199899b9c9a50526fedc4993fc7fa1f7e32d5"
+  integrity sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==
+  dependencies:
+    tslib "^2.0.0"
 
 use-memo-one@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.1.tgz#39e6f08fe27e422a7d7b234b5f9056af313bd22c"
   integrity sha512-oFfsyun+bP7RX8X2AskHNTxu+R3QdE/RC5IefMbqptmACAA/gfol1KDD5KRzPsGMa62sWxGZw+Ui43u6x4ddoQ==
 
-use-sidecar@^1.0.1, use-sidecar@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.5.tgz#ffff2a17c1df42e348624b699ba6e5c220527f2b"
-  integrity sha512-k9jnrjYNwN6xYLj1iaGhonDghfvmeTmYjAiGvOr7clwKfPjMXJf4/HOr7oT5tJwYafgp2tG2l3eZEOfoELiMcA==
+use-sidecar@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"
+  integrity sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==
   dependencies:
     detect-node-es "^1.1.0"
-    tslib "^1.9.3"
+    tslib "^2.0.0"
 
 use@^2.0.0:
   version "2.0.2"