[EuiDataGrid][EuiFlyout] Browser crashes on click if flyout is over EuiDataGrid

[dej611]

Referenced in elastic/kibana#100111

Steps to reproduce:

• Click on toggle Flyout
• Right click on a Datatable cell

Live demo: https://codesandbox.io/embed/pensive-easley-mxz5s?fontsize=14&hidenavigation=1&theme=dark

From some initial debugging this is due to some conflicts around the FocusTraps used in both components (one in Flyout and one for each EuiDataGrid cell).

At the same time having multiple flyout stacked (as in Lens with elastic/kibana#95217 ) the same issue can be reproduced also with a left click.

[flash1293]

This might be related to #4484

[thompsongl]

I can consistently reproduce in Chromium browsers, but have not yet been able to reproduce in Firefox.
(Codesandbox in all cases; haven't tried locally)

[flash1293]

@thompsongl @chandlerprall I think I tracked down the issue to the onFocus handler of the data grid cell. If a grid cell is clicked, it's trying to obtain focus, but it seems like the focus trap of the flyout is still active because this is happening synchronously, which causes the two components to fight for the focused element in an endless loop.

In my tests, waiting a tick before focusing the cell gives the flyout enough time to release the focus trap:
flash1293@c1ae0f8#diff-9d40afa057c929171c16c51ab0a6c842bea939f4328129246a2f2e772257c3bb

Not sure whether there is a more elegant way to fix it. What do you think?

[thompsongl]

Thanks for investigating, @flash1293
I think your analysis is correct, but as of now I don't have any better ideas for a fix. I'm certainly not opposed to a timeout tick, especially considering that the problem does not affect all browsers equally.

[flash1293]

I will set up a PR for this - it's an important issue for Lens because due to our layout it's easy to run into this.