[EuiDataGrid] Enabling draggable column headers causes header actions to stop working for grids within modals

[davismcphee]

Describe the bug
When a data grid is rendered within an EuiModal, enabling draggable column headers through canDragAndDropColumns causes the header actions to stop working. The popover shows as expected, but attempting to click an action causes the popover to be hidden on mouse down and the action not to run.

Impact and severity
The new draggable column headers are awesome and we're updating Discover to use them (elastic/kibana#197832), but some of the consumers of our grid render it within modals, so this bug will prevent them from adopting this feature. Currently we've made it opt-in for consumers, but this hurts UX consistency in Kibana, so it would be better if we could enable it everwhere.

Environment and versions

• EUI version: 97.3.0
• React version: 17.0.2
• Kibana version (if applicable): 8.17
• Browser: Edge Chromium
• Operating System: macOS

To Reproduce
Steps to reproduce the behavior:

1. Render EuiDataGrid with EuiModal and pass canDragAndDropColumns.
2. Click on a column header action menu button.
3. Attempt to click a header action, e.g. "Move left".
4. The action doesn't run.

Expected behavior
The column header action menu should work when rendered within EuiModal and using canDragAndDropColumns.

Minimum reproducible sandbox
https://codesandbox.io/p/sandbox/young-rain-rxkk38

Screenshots

[mgadewoll]

@davismcphee Thanks for raising this! 🙏
I can confirm that it's reproducible and it's related to this change here. The condition for the custom "blur" event doesn't always work as expected.

[mgadewoll]

@davismcphee Besides this bug, we we're wondering what's the use case for EuiDataGrid inside modals? Generally we're discouraging complex content inside modals in favor of flyouts instead. (as stated on the docs here).

[davismcphee]

@mgadewoll Thanks for fixing it! The main use case I'm aware of (and how we caught this) is for Timeline, where a Discover like experience is embedded in a modal across the Security solution. Timeline is maintained by @elastic/security-threat-hunting-investigations, but they use some of our components including the Discover data grid.