feat(eui): add repositionOnScroll to componentDefaults #9152

weronikaolejniczak · 2025-10-27T17:34:05Z

Summary

Add both EuiPopover and EuiToolTip's repositionOnScroll to componentDefaults.

Why are we making this change?

Resolves #8984

We had a short conversation about this with Anton and we think that the componentDefaults is the first nice step.

What repositionOnScroll does is it fixes EuiPopover / EuiToolTip positioning on anchors that are position: fixed. That is not always the behavior that we want. It adds listeners and recalculates the position so it isn't without a cost either.

That being said, we have a logic in the tooltip that makes only one be displayed at a time. And usually, popovers do not display at once (or display briefly at once).

The short-term proposal would be:

Switch the repositionOnScroll to true by default.

Build the @elastic/eui locally.

Test within Kibana to see if there is a significant performance overhead or behavior issues (intuition tells me - there won't be).

Add EuiPopover and EuiToolTip repositionOnScroll to componentDefaults.

Release and update in Kibana.

Using EuiProvider, pass the feature flag to repositionOnScroll in componentDefaults. This way, we will have enough time to test the result while not causing potential regression to existing functionality.

Estimation: up to 2 days

Because repositionOnScroll affects the component behavior I would not do it globally within EUI. That being said, through componentDefaults that we hook up to the feature flag for the new grid layout, that might be good!

The long-term proposal would be:

Redoing our overlays to not be portaled.

Provide better composition (likely, not wrapping the triggers).

We are making this change for the grid layout initiative in Kibana.

See more details here: elastic/kibana#240882

Screenshots #

EuiPopover

Kapture.2025-10-27.at.18.01.06.mp4

EuiToolTip

Kapture.2025-10-27.at.18.50.02.mp4

Impact to users

🟢 This is not a breaking change. It's an enhancement.

QA

Specific checklist

Verify that EuiPopover reposition on scroll works as expected in the testing story
Verify that EuiToolTip reposition on scroll works as expected in the testing story

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/src/components/provider/provider.stories.tsx

packages/eui/src/components/popover/popover.test.tsx

packages/eui/src/components/popover/popover.tsx

packages/eui/src/components/tool_tip/tool_tip.test.tsx

packages/eui/src/components/provider/provider.stories.tsx

Dosant · 2025-10-28T13:20:20Z

I tested the change in Kibana, and it seems to be working well! 👍

weronikaolejniczak · 2025-10-29T15:28:31Z

@mgadewoll ready for re-review 🙏🏻

packages/eui/cypress/support/helpers/wait_for_position_to_settle.ts

packages/eui/src/test/cypress/perform_reposition_test.tsx

packages/eui/src/services/popover/reposition_on_scroll.ts

weronikaolejniczak · 2025-10-30T10:55:23Z

@mgadewoll thank you for all the suggestions to make the implementation cleaner and improve test quality 🙏🏻 I applied all of them and I re-tested but I'd appreciate a test from you as well. Let me know if you have any more thoughts!

mgadewoll

🟢 The changes LGTM and the usage in popover and tooltip work as expected. Nice work! 🎉

⏰ Friendly reminder to revert the test commits.

packages/eui/src/services/popover/reposition_on_scroll.ts

…oll`

elasticmachine · 2025-10-31T19:15:19Z

💚 Build Succeeded

History

💚 Build #1796 succeeded 0e07439
💚 Build #1786 succeeded 9594536
💚 Build #1777 succeeded 2db21e8
💚 Build #1775 succeeded 0051a3f
💚 Build #1757 succeeded 6bc287b
💚 Build #1756 succeeded a88ed9b

cc @weronikaolejniczak

elasticmachine · 2025-10-31T19:27:32Z

💚 Build Succeeded

Buildkite Build
Commit: 7a4fcad

History

💔 Build #5105 failed 9594536
💔 Build #5098 failed 2db21e8
💚 Build #5080 succeeded 6bc287b
💚 Build #5073 succeeded ecaec4d
💚 Build #5059 succeeded 4446019
💚 Build #5057 succeeded e7658a6

cc @weronikaolejniczak

- `@elastic/eui`: `v109.0.0` ⏩ `v109.1.0` - `@elastic/eslint-plugin-eui`: `v2.5.0` ⏩ `v2.6.0` --- ## Changes - Updated i18n EUI mapping 6cc95b0 - Updated test in Unified Search 668948f ## Package updates ### `@elastic/eui` [`v109.1.0`](https://github.com/elastic/eui/releases/v109.1.0) - Added `--euiBottomBarOffset` CSS variable to `EuiBottomBar` for positioning other fixed elements relative to the bottom bar's height ([#9211](elastic/eui#9211)) - Updated `boxesVertical` icon and restored `checkInCircleFilled`, `errorFilled`, and `warningFilled` icons. ([#9194](elastic/eui#9194)) - Updated `EuiSuperDatePicker` with new time zone information, opt-in via `timeZoneDisplayProps`. ([#9191](elastic/eui#9191)) - Updated the position of `EuiModal` by removing bottom padding in `EuiOverlayMask` ([#9190](elastic/eui#9190)) - Added `EuiPopover` and `EuiToolTip`'s `repositionOnScroll` to `componentDefaults` ([#9152](elastic/eui#9152)) - Updated `EuiSuperDatePicker` with new time window buttons for time shifting and zoom out, opt-in via `showTimeWindowButtons` boolean prop. ([#9151](elastic/eui#9151)) - Added beta prop `hasAriaDisabled` to all base button components: `EuiButton`, `EuiButtonEmpty`, `EuiButtonIcon`, `EuibuttonGroup`, `EuiFilterButton` ([#9201](elastic/eui#9201)) - Added `euiDisabledSelector` variable that combines CSS selectors `:disabled` and `[aria-disabled="true"]` ([#9201](elastic/eui#9201)) - Added custom test matchers that check for both `disabled` and `aria-disabled` attributes: ([#9201](elastic/eui#9201)) - React testing Library: `.toBeEuiDisabled()` - Enzyme: `.toHaveEuiDisabledProp()` - Cypress: `should('be.euiDisabled)` **Bug fixes** - Fixed unexpected duplicate columns in `EuiDataGrid` crashing the column sorting by removing duplicate columns entirely ([#9209](elastic/eui#9209)) - Fixed a visual bug in `EuiTable` where long table row content would be cut off on mobile screens ([#9206](elastic/eui#9206)) - Fixed virtualized `EuiCodeBlock` rendering blank lines when content updates if scrolled. ([#9196](elastic/eui#9196)) - Fixed `EuiButtonGroup` button sizing to ensure square buttons when used with `isIconOnly=true` ([#9170](elastic/eui#9170)) **Accessibility** - Fixed an issue where portalled components like `EuiPopover` were not included in `EuiFlyout`'s focus trap through `includeSelectorInFocusTrap`, making them inaccessible to keyboard users ([#9103](elastic/eui#9103)) ### `@elastic/eslint-plugin-eui` [`v2.6.0`](https://github.com/elastic/eui/blob/main/packages/eslint-plugin/changelogs/CHANGELOG_2025.md#v260) - Added new `require-table-caption` rule. ([#9168](elastic/eui#9168)) --------- Co-authored-by: Elastic Machine <[email protected]>

- `@elastic/eui`: `v109.0.0` ⏩ `v109.1.0` - `@elastic/eslint-plugin-eui`: `v2.5.0` ⏩ `v2.6.0` --- ## Changes - Updated i18n EUI mapping 6cc95b0 - Updated test in Unified Search 668948f ## Package updates ### `@elastic/eui` [`v109.1.0`](https://github.com/elastic/eui/releases/v109.1.0) - Added `--euiBottomBarOffset` CSS variable to `EuiBottomBar` for positioning other fixed elements relative to the bottom bar's height ([elastic#9211](elastic/eui#9211)) - Updated `boxesVertical` icon and restored `checkInCircleFilled`, `errorFilled`, and `warningFilled` icons. ([elastic#9194](elastic/eui#9194)) - Updated `EuiSuperDatePicker` with new time zone information, opt-in via `timeZoneDisplayProps`. ([elastic#9191](elastic/eui#9191)) - Updated the position of `EuiModal` by removing bottom padding in `EuiOverlayMask` ([elastic#9190](elastic/eui#9190)) - Added `EuiPopover` and `EuiToolTip`'s `repositionOnScroll` to `componentDefaults` ([elastic#9152](elastic/eui#9152)) - Updated `EuiSuperDatePicker` with new time window buttons for time shifting and zoom out, opt-in via `showTimeWindowButtons` boolean prop. ([elastic#9151](elastic/eui#9151)) - Added beta prop `hasAriaDisabled` to all base button components: `EuiButton`, `EuiButtonEmpty`, `EuiButtonIcon`, `EuibuttonGroup`, `EuiFilterButton` ([elastic#9201](elastic/eui#9201)) - Added `euiDisabledSelector` variable that combines CSS selectors `:disabled` and `[aria-disabled="true"]` ([elastic#9201](elastic/eui#9201)) - Added custom test matchers that check for both `disabled` and `aria-disabled` attributes: ([elastic#9201](elastic/eui#9201)) - React testing Library: `.toBeEuiDisabled()` - Enzyme: `.toHaveEuiDisabledProp()` - Cypress: `should('be.euiDisabled)` **Bug fixes** - Fixed unexpected duplicate columns in `EuiDataGrid` crashing the column sorting by removing duplicate columns entirely ([elastic#9209](elastic/eui#9209)) - Fixed a visual bug in `EuiTable` where long table row content would be cut off on mobile screens ([elastic#9206](elastic/eui#9206)) - Fixed virtualized `EuiCodeBlock` rendering blank lines when content updates if scrolled. ([elastic#9196](elastic/eui#9196)) - Fixed `EuiButtonGroup` button sizing to ensure square buttons when used with `isIconOnly=true` ([elastic#9170](elastic/eui#9170)) **Accessibility** - Fixed an issue where portalled components like `EuiPopover` were not included in `EuiFlyout`'s focus trap through `includeSelectorInFocusTrap`, making them inaccessible to keyboard users ([elastic#9103](elastic/eui#9103)) ### `@elastic/eslint-plugin-eui` [`v2.6.0`](https://github.com/elastic/eui/blob/main/packages/eslint-plugin/changelogs/CHANGELOG_2025.md#v260) - Added new `require-table-caption` rule. ([elastic#9168](elastic/eui#9168)) --------- Co-authored-by: Elastic Machine <[email protected]>

weronikaolejniczak self-assigned this Oct 27, 2025

weronikaolejniczak force-pushed the feat/reposition-on-scroll-component-defaults branch from 24361f9 to f95d46b Compare October 27, 2025 17:44

weronikaolejniczak requested a review from Dosant October 27, 2025 17:50

weronikaolejniczak force-pushed the feat/reposition-on-scroll-component-defaults branch from f95d46b to 0664662 Compare October 27, 2025 17:55

weronikaolejniczak mentioned this pull request Oct 27, 2025

[EUI] Test local EUI with repositionOnScroll defaults elastic/kibana#240882

Closed

weronikaolejniczak force-pushed the feat/reposition-on-scroll-component-defaults branch from 0664662 to 3fa4cf7 Compare October 27, 2025 18:18

weronikaolejniczak marked this pull request as ready for review October 27, 2025 18:18

weronikaolejniczak requested a review from a team as a code owner October 27, 2025 18:18

weronikaolejniczak force-pushed the feat/reposition-on-scroll-component-defaults branch from 3fa4cf7 to b158a7e Compare October 27, 2025 18:35

acstll requested review from acstll and removed request for acstll October 28, 2025 09:47

mgadewoll reviewed Oct 28, 2025

View reviewed changes

weronikaolejniczak requested a review from mgadewoll October 29, 2025 15:28

mgadewoll reviewed Oct 30, 2025

View reviewed changes

packages/eui/cypress/support/helpers/wait_for_position_to_settle.ts Show resolved Hide resolved

mgadewoll reviewed Oct 30, 2025

View reviewed changes

packages/eui/src/test/cypress/perform_reposition_test.tsx Outdated Show resolved Hide resolved

mgadewoll reviewed Oct 30, 2025

View reviewed changes

packages/eui/src/services/popover/reposition_on_scroll.ts Show resolved Hide resolved

packages/eui/src/services/popover/reposition_on_scroll.ts Outdated Show resolved Hide resolved

packages/eui/src/services/popover/reposition_on_scroll.ts Outdated Show resolved Hide resolved

weronikaolejniczak requested a review from mgadewoll October 30, 2025 10:30

mgadewoll approved these changes Oct 30, 2025

View reviewed changes

weronikaolejniczak force-pushed the feat/reposition-on-scroll-component-defaults branch 3 times, most recently from 2db21e8 to 9594536 Compare October 31, 2025 12:11

tkajtoch reviewed Oct 31, 2025

View reviewed changes

packages/eui/src/services/popover/reposition_on_scroll.ts Outdated Show resolved Hide resolved

weronikaolejniczak added 5 commits October 31, 2025 19:14

feat(eui): add repositionOnScroll to componentDefaults

ef80912

chore(eui): remove expect.anything() from test assertion

146d593

refactor(eui): add a generic function for reposition on scroll

918ae48

chore(eui): add meaningful repositionOnScroll Cypress tests

06933f6

refactor(eui): rename performRepositionTest to `testRepositionOnScr…

d8101db

…oll`

refactor(eui): simplify createRepositionOnScroll function

2ed993e

weronikaolejniczak force-pushed the feat/reposition-on-scroll-component-defaults branch from 9594536 to 2ed993e Compare October 31, 2025 18:14

weronikaolejniczak added 2 commits October 31, 2025 19:16

refactor(eui): remove redundant export

a37a47a

refactor(eui): add return type to createRepositionOnScroll

0e07439

weronikaolejniczak requested a review from tkajtoch October 31, 2025 18:23

fix(eui): fix circular dependency for provider imports

7a4fcad

weronikaolejniczak merged commit 4b8099c into elastic:main Nov 5, 2025
7 checks passed

acstll mentioned this pull request Nov 17, 2025

Update EUI to v109.1.0 elastic/kibana#243270

Merged

feat(eui): add repositionOnScroll to componentDefaults #9152

feat(eui): add repositionOnScroll to componentDefaults #9152

Uh oh!

Conversation

weronikaolejniczak commented Oct 27, 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 #

EuiPopover

EuiToolTip

Impact to users

QA

Specific checklist

General checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Dosant commented Oct 28, 2025

Uh oh!

weronikaolejniczak commented Oct 29, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

weronikaolejniczak commented Oct 30, 2025

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

elasticmachine commented Oct 31, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Oct 31, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

weronikaolejniczak commented Oct 27, 2025 •

edited

Loading