[EuiFlyout] add `includeSelectorInFocusTrap` #8849

Dosant · 2025-07-08T14:44:25Z

Summary

Part of #8820, this is an attempt to address EuiFlyout's includeFixedHeadersInFocusTrap sub-issue where this prop won't longer work for Kibana in new grid layout since there won't be any fixed headers.

As an alternative for Kibana I propose this more general includeSelectorInFocusTrap that can be configured for component defaults.

This PR also refactors includeFixedHeadersInFocusTrap code to be built on top of includeSelectorInFocusTrap

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)
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/flyout/__snapshots__/flyout.test.tsx.snap

Dosant · 2025-07-08T15:38:25Z

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

+    );
+
+    expect(
+      queryByText('You can still continue tabbing through', { exact: false })


I am not sure what the best way is to test the focusTrap props or functionality, so I will stick to this workaround that was already here.

tkajtoch

The changes look good and work as expected. Thank you for your contribution!

Dosant · 2025-07-16T14:00:37Z

@tkajtoch, thank you! Don't have access to merge 😅 pls help :)

…ocus-trap

elasticmachine · 2025-07-16T16:11:52Z

💚 Build Succeeded

History

💔 Build #778 failed 26d1636
💚 Build #710 succeeded 5cdec4d

mgadewoll

Overall the code looks good to me but I haven't done a deep review/test as @tkajtoch already did one which is enough.

elasticmachine · 2025-07-16T16:24:59Z

💚 Build Succeeded

Buildkite Build
Commit: 38c6932

History

💚 Build #4332 succeeded 5cdec4d

`@elastic/eui`: `106.0.0` ⏩ `106.1.0` `@elastic/eslint-plugin-eui`: `2.1.0` ⏩ `2.2.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) New props and defaults have been added to `EuiFlyout`, including `includeSelectorInFocusTrap`, plus new global CSS variables for push mode offset control. Additionally, we introduced a small spacing fix for invalid `EuiDualRange` append component and added support for custom styles on `EuiTreeView` nodes via the css key. :warning: **React 16 is now deprecated:** EUI no longer tests against it or fixes issues specific to it. ## Changes - I removed forced click in: `x-pack/test/security_solution_cypress/cypress/tasks/rule_details.ts` - I removed `{enter}` in: `x-pack/test/security_solution_cypress/cypress/tasks/common/rule_actions.ts` (see #228517) ## Package updates ### `@elastic/eui` #### [`v106.1.0`](https://github.com/elastic/eui/releases/v106.1.0) - Added `--euiPushFlyoutOffsetInlineStart` and `--euiPushFlyoutOffsetInlineEnd` global CSS variables set by the `EuiFlyout` in `push` mode. ([#8872](elastic/eui#8872)) - Reduced the `min-width` for inputs in `EuiRange` and `EuiDualRange` ([#8866](elastic/eui#8866)) - Added `includeSelectorInFocusTrap` prop for `EuiFlyout` ([#8849](elastic/eui#8849)) - Added component defaults for `EuiFlyout` that include `includeSelectorInFocusTrap` and `includeFixedHeadersInFocusTrap` ([#8849](elastic/eui#8849)) **Bug fixes** - Fixed flaky manual return focus behavior on `EuiFlyout` by relying on `FocusTrap` returning focus instead ([#8878](elastic/eui#8878)) - Fixed `EuiFlyoutChild` closing its parent `EuiFlyout` on `Escape` keypress ([#8878](elastic/eui#8878)) - Fixed support for `css` key in items object passed to `EuiTreeView` ([#8864](elastic/eui#8864)) **Deprecations** - Deprecated support for React 16. Please update to a modern version of React or stay on EUI version 106.0.0 if you can't switch right now. ([#8868](elastic/eui#8868)) ### `@elastic/eslint-plugin-eui` #### [`v2.2.1`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.2.1) **Bug fixes** - Removed `no-css_color` entry which mapped to a duplicate `no-css-color` rule ([#8888](elastic/eui#8888)) #### [`v2.2.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.2.0) - Added new `prefer-eui-icon-tip` rule. ([#8877](elastic/eui#8877))

`@elastic/eui`: `106.0.0` ⏩ `106.1.0` `@elastic/eslint-plugin-eui`: `2.1.0` ⏩ `2.2.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) New props and defaults have been added to `EuiFlyout`, including `includeSelectorInFocusTrap`, plus new global CSS variables for push mode offset control. Additionally, we introduced a small spacing fix for invalid `EuiDualRange` append component and added support for custom styles on `EuiTreeView` nodes via the css key. :warning: **React 16 is now deprecated:** EUI no longer tests against it or fixes issues specific to it. ## Changes - I removed forced click in: `x-pack/test/security_solution_cypress/cypress/tasks/rule_details.ts` - I removed `{enter}` in: `x-pack/test/security_solution_cypress/cypress/tasks/common/rule_actions.ts` (see elastic#228517) ## Package updates ### `@elastic/eui` #### [`v106.1.0`](https://github.com/elastic/eui/releases/v106.1.0) - Added `--euiPushFlyoutOffsetInlineStart` and `--euiPushFlyoutOffsetInlineEnd` global CSS variables set by the `EuiFlyout` in `push` mode. ([elastic#8872](elastic/eui#8872)) - Reduced the `min-width` for inputs in `EuiRange` and `EuiDualRange` ([elastic#8866](elastic/eui#8866)) - Added `includeSelectorInFocusTrap` prop for `EuiFlyout` ([elastic#8849](elastic/eui#8849)) - Added component defaults for `EuiFlyout` that include `includeSelectorInFocusTrap` and `includeFixedHeadersInFocusTrap` ([elastic#8849](elastic/eui#8849)) **Bug fixes** - Fixed flaky manual return focus behavior on `EuiFlyout` by relying on `FocusTrap` returning focus instead ([elastic#8878](elastic/eui#8878)) - Fixed `EuiFlyoutChild` closing its parent `EuiFlyout` on `Escape` keypress ([elastic#8878](elastic/eui#8878)) - Fixed support for `css` key in items object passed to `EuiTreeView` ([elastic#8864](elastic/eui#8864)) **Deprecations** - Deprecated support for React 16. Please update to a modern version of React or stay on EUI version 106.0.0 if you can't switch right now. ([elastic#8868](elastic/eui#8868)) ### `@elastic/eslint-plugin-eui` #### [`v2.2.1`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.2.1) **Bug fixes** - Removed `no-css_color` entry which mapped to a duplicate `no-css-color` rule ([elastic#8888](elastic/eui#8888)) #### [`v2.2.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.2.0) - Added new `prefer-eui-icon-tip` rule. ([elastic#8877](elastic/eui#8877))

## Summary We introduced some EUI related hacks for flyouts for grid layout. After contributing some improvements to EUI we can clean the hacks up: - elastic/eui#8872 - this cleans up a hack to resize the push flyout using new exposed css variable - elastic/eui#8849 This allows us to specify which elements should be included in the flyout focus trap by default. Previously, it was the EUI fixed header, but in the grid layout, we don't have a fixed header. So, we need to tell EUI which elements to include: our header and sidenav. - Small unzyme --------- Co-authored-by: Tim Sullivan <[email protected]>

Dosant added 3 commits July 8, 2025 16:35

add includeSelectorInFocusTrap

2a09b93

changelog

13d820c

fix

5cdec4d

Dosant commented Jul 8, 2025

View reviewed changes

Dosant marked this pull request as ready for review July 8, 2025 15:39

Dosant requested a review from a team as a code owner July 8, 2025 15:39

tkajtoch self-requested a review July 9, 2025 14:21

tkajtoch approved these changes Jul 16, 2025

View reviewed changes

update text

26d1636

Dosant requested a review from mgadewoll July 16, 2025 15:37

Merge branch 'main' of github.com:elastic/eui into d/flyout-default-f…

38c6932

…ocus-trap

mgadewoll approved these changes Jul 16, 2025

View reviewed changes

mgadewoll merged commit 813d54d into elastic:main Jul 17, 2025
5 checks passed

This was referenced Jul 17, 2025

[Kibana Workspace Chrome] Improvements for new Kibana layout #8820

Open

[Workspace Chrome] Grid layout QA elastic/kibana#225263

Closed

weronikaolejniczak mentioned this pull request Jul 21, 2025

Upgrade EUI to v106.1.0 and ESLint plugin to v2.2.1 elastic/kibana#228828

Merged

Dosant mentioned this pull request Aug 4, 2025

[Workspace Chrome] Clean up some of EUI hacks elastic/kibana#230419

Merged

mgadewoll mentioned this pull request Sep 9, 2025

[Docs] Add EuiFlyout CSS vars and component default documentation #9001

Merged

2 tasks

weronikaolejniczak mentioned this pull request Oct 16, 2025

feat(eui): add a focus trap pubsub service #9103

Merged

17 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[EuiFlyout] add `includeSelectorInFocusTrap` #8849

[EuiFlyout] add `includeSelectorInFocusTrap` #8849

Uh oh!

Dosant commented Jul 8, 2025 •

edited

Loading

Uh oh!

Uh oh!

Dosant Jul 8, 2025

Uh oh!

tkajtoch left a comment

Uh oh!

Dosant commented Jul 16, 2025

Uh oh!

elasticmachine commented Jul 16, 2025

Uh oh!

mgadewoll left a comment

Uh oh!

elasticmachine commented Jul 16, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[EuiFlyout] add includeSelectorInFocusTrap #8849

[EuiFlyout] add includeSelectorInFocusTrap #8849

Uh oh!

Conversation

Dosant commented Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

General checklist

Uh oh!

Uh oh!

Dosant Jul 8, 2025

Choose a reason for hiding this comment

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

Dosant commented Jul 16, 2025

Uh oh!

elasticmachine commented Jul 16, 2025

💚 Build Succeeded

History

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Jul 16, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[EuiFlyout] add `includeSelectorInFocusTrap` #8849

[EuiFlyout] add `includeSelectorInFocusTrap` #8849

Dosant commented Jul 8, 2025 •

edited

Loading