Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Nov 14, 2024

Conversation

mgadewoll
Copy link
Contributor

@mgadewoll mgadewoll commented Nov 13, 2024

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

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
  • Code quality checklist
  • 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)

@mgadewoll mgadewoll force-pushed the datagrid/8119-inside-modal-fix branch from 2091fd1 to 6660ae7 Compare November 13, 2024 17:49
@mgadewoll mgadewoll marked this pull request as ready for review November 13, 2024 18:26
@mgadewoll mgadewoll requested a review from a team as a code owner November 13, 2024 18:26
@cee-chen cee-chen self-requested a review November 14, 2024 16:37
Copy link
Member

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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) 💀

@mgadewoll mgadewoll enabled auto-merge (squash) November 14, 2024 21:44
@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

@mgadewoll mgadewoll merged commit 316a864 into elastic:main Nov 14, 2024
5 checks passed
tkajtoch added a commit to elastic/kibana that referenced this pull request Nov 27, 2024
`v97.3.1-borealis.2`⏩`v98.0.0-borealis.1`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

# `@elastic/eui`

## [`v98.0.0`](https://github.com/elastic/eui/releases/v98.0.0)

**Bug fixes**

- Fixed an `EuiDataGrid` bug where column actions where not clickable
when `EuiDataGrid` with `columnVisibility.canDragAndDropColumns` was
used inside a modal ([#8135](elastic/eui#8135))

**Breaking changes**

- Removed `EuiFormRow`'s deprecated `columnCompressedSwitch` display
prop. Use `columnCompressed` instead
([#8113](elastic/eui#8113))

# `@elastic/eui-theme-borealis`

**Bug fixes**

- Fixed computed border token mapping
(elastic/eui#8170)

Co-authored-by: Elastic Machine <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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