[EuiModal] Permanently fix EuiModal to scroll-jumping issues, remov…

…e 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?)
elastic · Nov 16, 2022 · d8b3362 · d8b3362
1 parent 8d95c81
commit d8b3362
Show file tree

Hide file tree

Showing 16 changed files with 76 additions and 528 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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"