fix(eui): add scroll offset for actions menu in EuiDataGrid #8640
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
weronikaolejniczak
changed the title
weronikaolejniczak
force-pushed
the
8484-euidatagrid-users-can-lose-sight-of-actions-menu
branch
from
6ada525 to
30394e3
Compare
weronikaolejniczak
changed the title
mgadewoll
reviewed
May 5, 2025
mgadewoll
reviewed
May 5, 2025
Collaborator
💚 Build SucceededHistory
|
Collaborator
💚 Build Succeeded
History
|
mgadewoll
approved these changes
May 5, 2025
Contributor
mgadewoll
left a comment
mgadewoll
left a comment
There was a problem hiding this comment.
🟢 Changes LGTM and scrolling cells into view works as expected with including the actions menu. 👍
tkajtoch
added a commit
to elastic/kibana
that referenced
this pull request
May 28, 2025
`102.1.0` ⏩ `102.2.0` [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) ## Package updates ### `@elastic/eui` #### [`v102.2.0`](https://github.com/elastic/eui/releases/v102.2.0) - Added `useIsDarkMode` utility ([#8701](elastic/eui#8701)) - Added scroll position data as arguments to `virtualizationOptions.onScroll` for the virtualized `EuiDataGrid` ([#8688](elastic/eui#8688)) - Updated secondary fill to `primary` on `EuiIcon` ([#8687](elastic/eui#8687)) - Added white outline on EuiLoadingElastic to make it compliant with the Brand requirements ([#8684](elastic/eui#8684)) **Bug fixes** - Fixed `EuiGlobalToastList` toasts not being cleaned properly when they are added and removed at the same time ([#8692](elastic/eui#8692)) - Resolved an issue where the `EuiDataGrid` cell actions menu was hidden by the header when a cell was clicked to scroll into view ([#8640](elastic/eui#8640)) **Accessibility** - Improved accessibility of `EuiSelect` by removing the empty `<option>` added when `hasNoInitialSelection` is `true` from the DOM, once a user makes a selection. ([#8706](elastic/eui#8706)) - Improved the accessibility of `EuiSuperDatePicker`'s quick select buttons by preventing duplicate screen reader output ([#8686](elastic/eui#8686)) Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
May 28, 2025
`102.1.0` ⏩ `102.2.0` [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) ## Package updates ### `@elastic/eui` #### [`v102.2.0`](https://github.com/elastic/eui/releases/v102.2.0) - Added `useIsDarkMode` utility ([elastic#8701](elastic/eui#8701)) - Added scroll position data as arguments to `virtualizationOptions.onScroll` for the virtualized `EuiDataGrid` ([elastic#8688](elastic/eui#8688)) - Updated secondary fill to `primary` on `EuiIcon` ([elastic#8687](elastic/eui#8687)) - Added white outline on EuiLoadingElastic to make it compliant with the Brand requirements ([elastic#8684](elastic/eui#8684)) **Bug fixes** - Fixed `EuiGlobalToastList` toasts not being cleaned properly when they are added and removed at the same time ([elastic#8692](elastic/eui#8692)) - Resolved an issue where the `EuiDataGrid` cell actions menu was hidden by the header when a cell was clicked to scroll into view ([elastic#8640](elastic/eui#8640)) **Accessibility** - Improved accessibility of `EuiSelect` by removing the empty `<option>` added when `hasNoInitialSelection` is `true` from the DOM, once a user makes a selection. ([elastic#8706](elastic/eui#8706)) - Improved the accessibility of `EuiSuperDatePicker`'s quick select buttons by preventing duplicate screen reader output ([elastic#8686](elastic/eui#8686)) Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> (cherry picked from commit a5ff0f4)
akowalska622
pushed a commit
to akowalska622/kibana
that referenced
this pull request
May 29, 2025
`102.1.0` ⏩ `102.2.0` [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) ## Package updates ### `@elastic/eui` #### [`v102.2.0`](https://github.com/elastic/eui/releases/v102.2.0) - Added `useIsDarkMode` utility ([elastic#8701](elastic/eui#8701)) - Added scroll position data as arguments to `virtualizationOptions.onScroll` for the virtualized `EuiDataGrid` ([elastic#8688](elastic/eui#8688)) - Updated secondary fill to `primary` on `EuiIcon` ([elastic#8687](elastic/eui#8687)) - Added white outline on EuiLoadingElastic to make it compliant with the Brand requirements ([elastic#8684](elastic/eui#8684)) **Bug fixes** - Fixed `EuiGlobalToastList` toasts not being cleaned properly when they are added and removed at the same time ([elastic#8692](elastic/eui#8692)) - Resolved an issue where the `EuiDataGrid` cell actions menu was hidden by the header when a cell was clicked to scroll into view ([elastic#8640](elastic/eui#8640)) **Accessibility** - Improved accessibility of `EuiSelect` by removing the empty `<option>` added when `hasNoInitialSelection` is `true` from the DOM, once a user makes a selection. ([elastic#8706](elastic/eui#8706)) - Improved the accessibility of `EuiSuperDatePicker`'s quick select buttons by preventing duplicate screen reader output ([elastic#8686](elastic/eui#8686)) Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
zacharyparikh
pushed a commit
to zacharyparikh/kibana
that referenced
this pull request
Jun 4, 2025
`102.1.0` ⏩ `102.2.0` [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) ## Package updates ### `@elastic/eui` #### [`v102.2.0`](https://github.com/elastic/eui/releases/v102.2.0) - Added `useIsDarkMode` utility ([elastic#8701](elastic/eui#8701)) - Added scroll position data as arguments to `virtualizationOptions.onScroll` for the virtualized `EuiDataGrid` ([elastic#8688](elastic/eui#8688)) - Updated secondary fill to `primary` on `EuiIcon` ([elastic#8687](elastic/eui#8687)) - Added white outline on EuiLoadingElastic to make it compliant with the Brand requirements ([elastic#8684](elastic/eui#8684)) **Bug fixes** - Fixed `EuiGlobalToastList` toasts not being cleaned properly when they are added and removed at the same time ([elastic#8692](elastic/eui#8692)) - Resolved an issue where the `EuiDataGrid` cell actions menu was hidden by the header when a cell was clicked to scroll into view ([elastic#8640](elastic/eui#8640)) **Accessibility** - Improved accessibility of `EuiSelect` by removing the empty `<option>` added when `hasNoInitialSelection` is `true` from the DOM, once a user makes a selection. ([elastic#8706](elastic/eui#8706)) - Improved the accessibility of `EuiSuperDatePicker`'s quick select buttons by preventing duplicate screen reader output ([elastic#8686](elastic/eui#8686)) Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Closes #8484
On this PR, I fix the issue where the actions menu gets hidden under the header in the
EuiDataGridwhen scrolling into view (when clicking on the cell) in the top direction.The offset is applied conditionally to the top because as you can see below, the down direction doesn't need any adjustment.
I thought about accessing the actions menu height programmatically which would make it more robust BUT we don't plan on changing the height or supporting customizing the height of the actions menu. Any logic that'd calculate the height is at a performance cost. A simple constant is enough for now.
Before
Screen.Recording.2025-04-30.at.12.20.07.mov
After
Screen.Recording.2025-04-30.at.12.19.44.mov
QA
General checklist
Checked in both light and dark modesChecked in both MacOS and Windows high contrast modesEdge, and FirefoxChecked for accessibility including keyboard-only and screenreader modesAdded documentationProps have proper autodocs (using@defaultif default values are missing) and playground togglesChecked Code Sandbox works for any docs examplesUpdated visual regression testsIf applicable, added the breaking change issue label (and filled out the breaking change 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)