Eui: DataGrid in Modal performance

[Tocknicsu]

Here are two minimum reproduce apps with different version(only change @elastic/eui version).

https://github.com/Tocknicsu/eui-datagrid
https://tocknicsu.github.io/eui-datagrid/22.3.0/
https://tocknicsu.github.io/eui-datagrid/22.4.0/

There are two questions:

• When I put the datagrid in modal(Click any button) at 22.4.0 version. The render speed looks not good.
• When I click button in the table at 22.4.0 versoin, it occurs following error:

FocusLock: focus-fighting detected. Only one focus management system could be active. See https://github.com/theKashey/focus-lock/#focus-fighting

The two questions may be related to https://github.com/elastic/eui/pull/3128

I have no solution for first question.
And my temporary solution for second question is put a <button /> at src/js/containers/App:26.

Should I change my code for new version or I misunderstand something?
And any better solution for second question?

[chandlerprall]

Thanks for recreating with simple setups! Definitely looks related to #3128, and it appears that there is a constant fighting for focus which is also causing the render performance issue.

Quick notes for whoever looks at this:

The observed error is coming from EuiModal -> EuiFocusLock -> react-focus-lock -> focus-lock.

EuiDataGrid is only supposed to set/affect focus when it has been interacted with, not immediately upon rendering. In the provided examples, the grid is the first interactive element inside the modal so I believe the focus lock is trying to focus the grid element, which is then shifting focus to the first cell, causing the in-fighting.

[chandlerprall]

Did some more investigation on this:

• the freeze/delay in rendering when the table is opened looks like it is from every cell being wrapping in EuiFocusTrap, apparently even when the trap is disabled it triggers a lot of work. More investigation can be done here
• The focus fighting is actually between two grids - the button in each row triggers another modal with another grid. I was unable to replicate separately with only a single modal+grid combination.