[EuiDataGrid] Fix column actions not working for draggable datagrid inside modals

[mgadewoll]

Summary

closes #8119

This PR fixes an issue for EuiDataGrid with columnVisibility.canDragAndDropColumns enabled and used inside EuiModal where the column actions would not be clickable.

This was caused by a custom "blur"/"clickAway" event being fired (added here) because the selector for this condition was selecting the modal focus trap instead of the column action one.

Changes

• updates the condition to check for all focus traps and exclude modal focus traps that contain the datagrid
• adds a regression test for this scenario

before

Screen.Recording.2024-11-13.at.14.53.13.mov

after

Screen.Recording.2024-11-13.at.14.53.37.mov

TODO

• revert testing example commit after review

QA

• the added cypress test passed
• verify expected behavior using this testing example (click the button to open the modal with the datagrid inside)
• generally ensure the EuiDataGrid with draggable columns still works as expected

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

[cee-chen]

Changes look great - thanks for hopping on and live devtooling/coding with me! Don't forget to revert the src-docs test (because I've definitely forgotten before lol) 💀

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_8135/
• Storybook: https://eui.elastic.co/pr_8135/storybook
• New docs: https://eui.elastic.co/pr_8135/new-docs

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 7bdf85d

History

• 💚 Build #3059 succeeded 2be2247
• 💚 Build #3051 succeeded 6660ae7
• 💔 Build #3050 failed 2091fd1