From c1ae0f85fc17dfeedbe7099c1d5222eb6c850611 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Wed, 19 May 2021 13:32:18 +0200
Subject: [PATCH] fix freezing

---
 .../datagrid/virtualization_constrained.js    | 97 +++++++++++++------
 src/components/datagrid/data_grid_cell.tsx    | 14 +--
 src/components/flyout/flyout.tsx              |  1 +
 3 files changed, 79 insertions(+), 33 deletions(-)

diff --git a/src-docs/src/views/datagrid/virtualization_constrained.js b/src-docs/src/views/datagrid/virtualization_constrained.js
index 2678f3ac76e..24108573e5f 100644
--- a/src-docs/src/views/datagrid/virtualization_constrained.js
+++ b/src-docs/src/views/datagrid/virtualization_constrained.js
@@ -14,6 +14,11 @@ import {
   EuiLink,
   EuiText,
   EuiResizableContainer,
+  EuiButton,
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiFlyoutBody,
+  EuiTitle,
 } from '../../../../src/components/';
 
 const DataContext = createContext();
@@ -125,6 +130,39 @@ export default () => {
     []
   );
 
+  const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+
+  const closeFlyout = () => setIsFlyoutVisible(false);
+
+  const toggleFlyout = () => setIsFlyoutVisible((isVisible) => !isVisible);
+
+  const flyoutTitleId = 'myid';
+
+  let flyout;
+  if (isFlyoutVisible) {
+    flyout = (
+      <EuiFlyout
+        ownFocus={false}
+        onClose={closeFlyout}
+        outsideClickCloses={true}
+        aria-labelledby={flyoutTitleId}>
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="s">
+            <h2 id={flyoutTitleId}>A flyout without ownFocus</h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>
+          <EuiText>
+            <p>
+              The page contents is still interactable though screenreader users
+              will find themselves still within the bounds of the flyout.
+            </p>
+          </EuiText>
+        </EuiFlyoutBody>
+      </EuiFlyout>
+    );
+  }
+
   const grid = (
     <EuiDataGrid
       aria-label="Virtualized data grid demo"
@@ -142,32 +180,37 @@ export default () => {
   );
 
   return (
-    <DataContext.Provider value={dataContext}>
-      <EuiText>
-        <p>There are {mountedCellCount} rendered cells</p>
-      </EuiText>
-
-      <EuiResizableContainer style={{ height: '400px' }}>
-        {(EuiResizablePanel, EuiResizableButton) => (
-          <>
-            <EuiResizablePanel initialSize={50} minSize="30%">
-              {grid}
-            </EuiResizablePanel>
-
-            <EuiResizableButton />
-
-            <EuiResizablePanel initialSize={50} minSize="200px">
-              <EuiText>
-                <p>
-                  This panel is constraining the datagrid. You can resize it
-                  using the drag handle and <strong>EuiDataGrid</strong>{' '}
-                  automatically detects the changes to its container size.
-                </p>
-              </EuiText>
-            </EuiResizablePanel>
-          </>
-        )}
-      </EuiResizableContainer>
-    </DataContext.Provider>
+    <div>
+      <EuiButton onClick={toggleFlyout}>Toggle flyout</EuiButton>
+
+      {flyout}
+      <DataContext.Provider value={dataContext}>
+        <EuiText>
+          <p>There are {mountedCellCount} rendered cells</p>
+        </EuiText>
+
+        <EuiResizableContainer style={{ height: '400px' }}>
+          {(EuiResizablePanel, EuiResizableButton) => (
+            <>
+              <EuiResizablePanel initialSize={50} minSize="30%">
+                {grid}
+              </EuiResizablePanel>
+
+              <EuiResizableButton />
+
+              <EuiResizablePanel initialSize={50} minSize="200px">
+                <EuiText>
+                  <p>
+                    This panel is constraining the datagrid. You can resize it
+                    using the drag handle and <strong>EuiDataGrid</strong>{' '}
+                    automatically detects the changes to its container size.
+                  </p>
+                </EuiText>
+              </EuiResizablePanel>
+            </>
+          )}
+        </EuiResizableContainer>
+      </DataContext.Provider>
+    </div>
   );
 };
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index 9ad88f45ab4..94fafddef69 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -286,13 +286,15 @@ export class EuiDataGridCell extends Component<
     //      event up, which can trigger the focus() call below, causing focus lock fighting
     if (this.cellRef.current === e.target) {
       const { colIndex, visibleRowIndex, isExpandable } = this.props;
-      this.context.setFocusedCell([colIndex, visibleRowIndex]);
+      setTimeout(() => {
+        this.context.setFocusedCell([colIndex, visibleRowIndex]);
 
-      const interactables = this.getInteractables();
-      if (interactables.length === 1 && isExpandable === false) {
-        interactables[0].focus();
-        this.setState({ disableCellTabIndex: true });
-      }
+        const interactables = this.getInteractables();
+        if (interactables.length === 1 && isExpandable === false) {
+          interactables[0].focus();
+          this.setState({ disableCellTabIndex: true });
+        }
+      }, 0);
     }
   };
 
diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
index 967f1faeb83..a82f64535da 100644
--- a/src/components/flyout/flyout.tsx
+++ b/src/components/flyout/flyout.tsx
@@ -369,6 +369,7 @@ const EuiFlyout = forwardRef(
       </Element>
     );
 
+    console.log('rendering flyout with focus trap disabled: ' + isPushed);
     /*
      * Trap focus even when `ownFocus={false}`, otherwise closing
      * the flyout won't return focus to the originating button.