[Data Grid] Account for text being selected when cell scrolls into view by acstll · Pull Request #9276 · elastic/eui

acstll · 2025-12-17T09:00:20Z

Summary

In EuiDataGrid, when you click e.g. focus on a cell that is not fully visible, it will instantly scroll fully into view. Both axis. If you try to select text on a cell that is not fully visible, the scrolling will block you from making the selection.

This PR adds a small check for the text selection use case, right before doing the automatic scroll.

~~Let's tests this to see if it makes sense.~~ It's been manually tested and fulfills the request in elastic/kibana#245368

Why are we making this change?

It's a papercut kind of fix. It improves UX.

Screenshots

Before

Check the clip in elastic/kibana#245368

After

Clip

Impact to users

🟢 None. No API or type changes.

QA

Test in this story, setting "Lines per row" to "auto" in the UI settings → you should be able to select text in cells that are not fully visible without the cell being scrolled into view

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- 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)
- If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
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)

packages/eui/changelogs/upcoming/9276.md

packages/eui/src/services/hooks/useIsMouseDown.ts

packages/eui/src/components/datagrid/utils/scrolling.tsx

mgadewoll · 2025-12-19T15:06:21Z

packages/eui/src/components/datagrid/utils/scrolling.tsx

  useEffect(() => {
    if (focusedCell) {
+      // do not scroll if text is being selected
+      if (isPointerDown || window?.getSelection()?.type === 'Range') {


Now that I think about it: Should we add some tests for this to verify scrolling doesn't happen in this case?

aha! it wouldn't hurt, let me give it a try!

new changes! ✨

improved the useIsPointerDown hook, adding a prop to scope it to an element, and added unit tests fb19d55

grid's outer element in being passed as such 0132308

added tests that verify the click/scrolling logic as mentioned above (the trick was using realMouseDown({ scrollBehavior: false })) 589fd87

thanks for the help and hints with cypress 🫶

this ensures the interaction is reliable, since scrolling will only happen after the pointer is up

Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>

- also account for other "edge case" events - add unit tests (authored in concert with Claude Opus 4.5)

Authored in concert with Claude Opus 4.5

elasticmachine · 2026-01-14T08:28:58Z

💚 Build Succeeded

History

💚 Build #2416 succeeded 589fd87
💚 Build #2412 succeeded 0132308
💚 Build #2269 succeeded f6ec5c5
💚 Build #2262 succeeded df2a4d9
💚 Build #2251 succeeded 3d71a2a
💚 Build #2245 succeeded 604a640

cc @acstll

elasticmachine · 2026-01-14T08:43:47Z

💚 Build Succeeded

Buildkite Build
Commit: 2e63dc2

History

💚 Build #5591 succeeded 589fd87
💚 Build #5589 succeeded 0132308
💚 Build #5470 succeeded f6ec5c5
💚 Build #5464 succeeded df2a4d9
💚 Build #5453 succeeded 3d71a2a
💚 Build #5449 succeeded 604a640

cc @acstll

mgadewoll · 2026-01-19T08:14:14Z

packages/eui/src/services/hooks/useIsPointerDown.ts

+      }
+    };
+
+    const controller = new AbortController();


Good thinking to use the more modern API here 🎉

mgadewoll

🟢 The update is LGTM and the scroll behavior works as expected when selecting as well as when not. Thanks for the additional changes!

## Dependency updates - `@elastic/eui`: `v111.1.0` ⏩ `v112.0.0` - `@elastic/eslint-plugin-eui`: `v2.6.0` ⏩ `v2.7.0` --- ## Package updates ### `@elastic/eui` [v112.0.0](https://github.com/elastic/eui/releases/tag/v112.0.0) - Added `productDiscover` icon ([#9311](elastic/eui#9311)) - Updated `chartGauge` icon glyph ([#9311](elastic/eui#9311)) - Updated icon glyphs `endpoint` `eraser` `errorFill` `error` `eyeSlash` `faceHappy` `faceNeutral` `faceSad` `folder` `fullScreenExit` `fullScreen` `gradient` `grid` `heart` `home` `if` `image` `infinity` `inputOutput` `key` `keyboard` `lineBreakSlash` `lineBreak` `lineDash` `lineDot` `lineSolid` `logOut` `magnifyMinus` `magnifyPlus` `magnify` `mail` `map` `mapping` `menuLeft` `menuRight` `menu` `merge` `minusCircle` `minusSquare` `minus` `money` `moon` `move` `nested` `number` `package` `paintBucket` `palette` `paperClip` `partial` `pattern` `pause` `pencil` `percent` `pinFill` `pin` `pivot` `plusCircle` `plusSquare` `plus` `popper` `presentation` `processor` `productStreamsWired` `queryField` `queryOperand` `querySelector` `queryValue` `query` `question` `quote` `radar` `readOnly` `redo` `reporter` `return` `rocket` `scissors` `send` `shard` `share` `snowflake` `sortAscending` `sortDescending` `starFill` `star` `stop` `sun` `tableInfo` `tableTime` `textAlignCenter` `textAlignLeft` `textAlignRight` `textBold` `textHeading` `textItalic` `textStrike` `textUnderline` `thermometer` `thumbDown` `thumbUp` `timeline` `transitionLeftIn` `transitionLeftOut` `transitionTopIn` `transitionTopOut` `undo` `vectorSquare` `vectorTriangle` `videoPlayer` `warningFill` `waypoint` `wifiSlash` `wifi` ([#9303](elastic/eui#9303)) ([#9303](elastic/eui#9303)) - Added icons - `archive` `unarchive` `axisX` `axisYLeft` `axisYRight` `bulb` `cloud` `hourglass` `megaphone` `workflow` ([#9303](elastic/eui#9303)) - Added `headerVisibility` prop on `EuiDataGrid` to support rendering the datagrid header element optionally ([#9281](elastic/eui#9281)) - Updated 244 icon definitions to a more consistent naming convention. All 100 renamed icons include a backward-compatible alias in the icon map to support legacy references. ([#9279](elastic/eui#9279)) - Added icons `briefcase`, `productCloudInfra`, `productDashboard`, `productML` ([#9301](elastic/eui#9301)) - Updated glyphs `bullseye`, `bolt` ([#9301](elastic/eui#9301)) - Added `dismissButtonProps` prop to `EuiCallOut` ([#9285](elastic/eui#9285)) **Bug fixes** - Fixed `EuiFlyout` to properly forward refs when `session` prop is used. ([#9318](elastic/eui#9318)) - Fixed `EuiDataGrid` cells scrolling into view while trying to select text ([#9276](elastic/eui#9276)) **Breaking changes** - Removed `euiPaletteForLightBackground` and `euiPaletteForDarkBackground` deprecated palette functions. Use `euiTheme.colors.vis.euiColorVisText{NUMBER}` tokens instead. ([#9296](elastic/eui#9296)) **Accessibility** - Improved the accessibility of `EuiDataGrid`s column selector drag handle buttons by ensuring distinctive labels ([#9282](elastic/eui#9282)) ### `@elastic/eslint-plugin-eui` v2.7.0 - Added `no-static-z-index` rule ([#9236](elastic/eui#9236))

## Dependency updates - `@elastic/eui`: `v111.1.0` ⏩ `v112.0.0` - `@elastic/eslint-plugin-eui`: `v2.6.0` ⏩ `v2.7.0` --- ## Package updates ### `@elastic/eui` [v112.0.0](https://github.com/elastic/eui/releases/tag/v112.0.0) - Added `productDiscover` icon ([elastic#9311](elastic/eui#9311)) - Updated `chartGauge` icon glyph ([elastic#9311](elastic/eui#9311)) - Updated icon glyphs `endpoint` `eraser` `errorFill` `error` `eyeSlash` `faceHappy` `faceNeutral` `faceSad` `folder` `fullScreenExit` `fullScreen` `gradient` `grid` `heart` `home` `if` `image` `infinity` `inputOutput` `key` `keyboard` `lineBreakSlash` `lineBreak` `lineDash` `lineDot` `lineSolid` `logOut` `magnifyMinus` `magnifyPlus` `magnify` `mail` `map` `mapping` `menuLeft` `menuRight` `menu` `merge` `minusCircle` `minusSquare` `minus` `money` `moon` `move` `nested` `number` `package` `paintBucket` `palette` `paperClip` `partial` `pattern` `pause` `pencil` `percent` `pinFill` `pin` `pivot` `plusCircle` `plusSquare` `plus` `popper` `presentation` `processor` `productStreamsWired` `queryField` `queryOperand` `querySelector` `queryValue` `query` `question` `quote` `radar` `readOnly` `redo` `reporter` `return` `rocket` `scissors` `send` `shard` `share` `snowflake` `sortAscending` `sortDescending` `starFill` `star` `stop` `sun` `tableInfo` `tableTime` `textAlignCenter` `textAlignLeft` `textAlignRight` `textBold` `textHeading` `textItalic` `textStrike` `textUnderline` `thermometer` `thumbDown` `thumbUp` `timeline` `transitionLeftIn` `transitionLeftOut` `transitionTopIn` `transitionTopOut` `undo` `vectorSquare` `vectorTriangle` `videoPlayer` `warningFill` `waypoint` `wifiSlash` `wifi` ([elastic#9303](elastic/eui#9303)) ([elastic#9303](elastic/eui#9303)) - Added icons - `archive` `unarchive` `axisX` `axisYLeft` `axisYRight` `bulb` `cloud` `hourglass` `megaphone` `workflow` ([elastic#9303](elastic/eui#9303)) - Added `headerVisibility` prop on `EuiDataGrid` to support rendering the datagrid header element optionally ([elastic#9281](elastic/eui#9281)) - Updated 244 icon definitions to a more consistent naming convention. All 100 renamed icons include a backward-compatible alias in the icon map to support legacy references. ([elastic#9279](elastic/eui#9279)) - Added icons `briefcase`, `productCloudInfra`, `productDashboard`, `productML` ([elastic#9301](elastic/eui#9301)) - Updated glyphs `bullseye`, `bolt` ([elastic#9301](elastic/eui#9301)) - Added `dismissButtonProps` prop to `EuiCallOut` ([elastic#9285](elastic/eui#9285)) **Bug fixes** - Fixed `EuiFlyout` to properly forward refs when `session` prop is used. ([elastic#9318](elastic/eui#9318)) - Fixed `EuiDataGrid` cells scrolling into view while trying to select text ([elastic#9276](elastic/eui#9276)) **Breaking changes** - Removed `euiPaletteForLightBackground` and `euiPaletteForDarkBackground` deprecated palette functions. Use `euiTheme.colors.vis.euiColorVisText{NUMBER}` tokens instead. ([elastic#9296](elastic/eui#9296)) **Accessibility** - Improved the accessibility of `EuiDataGrid`s column selector drag handle buttons by ensuring distinctive labels ([elastic#9282](elastic/eui#9282)) ### `@elastic/eslint-plugin-eui` v2.7.0 - Added `no-static-z-index` rule ([elastic#9236](elastic/eui#9236))

…view (elastic#9276) Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>

acstll self-assigned this Dec 17, 2025

acstll added skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) support-duty-flywheel Label for PRs, see eui-private #310 labels Dec 17, 2025

acstll mentioned this pull request Dec 17, 2025

[Discover] Cells auto scrolls to top when highlighting, breaking text selection elastic/kibana#245368

Open

acstll removed the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Dec 19, 2025

acstll marked this pull request as ready for review December 19, 2025 08:36

acstll requested a review from a team as a code owner December 19, 2025 08:36

mgadewoll reviewed Dec 19, 2025

View reviewed changes

packages/eui/changelogs/upcoming/9276.md Outdated Show resolved Hide resolved

packages/eui/src/services/hooks/useIsMouseDown.ts Outdated Show resolved Hide resolved

packages/eui/src/components/datagrid/utils/scrolling.tsx Outdated Show resolved Hide resolved

acstll requested a review from mgadewoll December 19, 2025 14:36

mgadewoll reviewed Dec 19, 2025

View reviewed changes

acstll and others added 8 commits January 13, 2026 13:18

[Data Grid] Account for text being selected when cell scrolls into view

1770876

Remove setTimeout, check for pointer down

b73210b

this ensures the interaction is reliable, since scrolling will only happen after the pointer is up

Fix bad import, argh

e679195

Changelog

d5b69f3

Update changelog

fec3fd7

Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>

[Feedback] Do not check only for pointer type mouse

170cfc4

[useIsPointerDown] Add optional container constrain for pointer events

fb19d55

- also account for other "edge case" events - add unit tests (authored in concert with Claude Opus 4.5)

Pass data grid container ref to useIsPointerDown

0132308

acstll force-pushed the datagrid-cell-focus-scroll-text-selection branch from f6ec5c5 to 0132308 Compare January 13, 2026 13:46

[Data Grid] Add cy test for mouse interaction with cells

589fd87

Authored in concert with Claude Opus 4.5

acstll requested a review from mgadewoll January 13, 2026 18:28

Slightly better interaction tests, added delay

2e63dc2

mgadewoll reviewed Jan 19, 2026

View reviewed changes

mgadewoll approved these changes Jan 19, 2026

View reviewed changes

acstll merged commit f720f91 into elastic:main Jan 19, 2026
5 checks passed

tkajtoch mentioned this pull request Jan 19, 2026

Update EUI to v112.0.0 elastic/kibana#249573

Merged

weronikaolejniczak pushed a commit to weronikaolejniczak/eui that referenced this pull request Jan 23, 2026

[Data Grid] Account for text being selected when a cell scrolls into …

e1e4eca

…view (elastic#9276) Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>

tkajtoch mentioned this pull request Mar 16, 2026

[EuiDataGrid] Fix scrolling on focus return #9453

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Data Grid] Account for text being selected when cell scrolls into view#9276

[Data Grid] Account for text being selected when cell scrolls into view#9276
acstll merged 10 commits intoelastic:mainfrom
acstll:datagrid-cell-focus-scroll-text-selection

acstll commented Dec 17, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mgadewoll Dec 19, 2025

Uh oh!

acstll Dec 19, 2025

Uh oh!

acstll Jan 13, 2026

Uh oh!

elasticmachine commented Jan 14, 2026

Uh oh!

elasticmachine commented Jan 14, 2026

Uh oh!

mgadewoll Jan 19, 2026

Uh oh!

mgadewoll left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

acstll commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Screenshots

Before

After

Impact to users

QA

General checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mgadewoll Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

acstll Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

acstll Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Jan 14, 2026

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Jan 14, 2026

💚 Build Succeeded

History

Uh oh!

mgadewoll Jan 19, 2026

Choose a reason for hiding this comment

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

acstll commented Dec 17, 2025 •

edited

Loading