Skip to content

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

@davismcphee

Description

@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
Image

Metadata

Metadata

Assignees

Labels

Type

No fields configured for Bug.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions