fix freezing

flash1293 · May 19, 2021 · c1ae0f8 · c1ae0f8
1 parent 47b4e0c
commit c1ae0f8
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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.