Skip to content

Comments

[EuiModal] Support focusTrapProps to handle manual return focus#8945

Merged
mgadewoll merged 5 commits intoelastic:mainfrom
mgadewoll:modal/support-focus-trap-props
Aug 25, 2025
Merged

[EuiModal] Support focusTrapProps to handle manual return focus#8945
mgadewoll merged 5 commits intoelastic:mainfrom
mgadewoll:modal/support-focus-trap-props

Conversation

@mgadewoll
Copy link
Contributor

@mgadewoll mgadewoll commented Aug 5, 2025

Summary

This PR updates EuiModal and adds the prop focusTrapProps. This update aims to support manually returning focus on closing a modal in the same way that EuiFlyout does.
Currently when the focus is not being returned automatically, the only way to return focus on closing a modal is to do it as part of the onClose callback.

Additional changes

  • adds documentation about manually returning focus on closing EuiModal and EuiFlyout
EuiModal EuiFlyout
Screenshot 2025-08-05 at 17 58 00 Screenshot 2025-08-05 at 17 57 51

Why are we making this change?

Aligning the API for the same functionality across different components.

Screenshots

Screen.Recording.2025-08-05.at.17.57.28.mov

Impact to users

🟢 There are no updates needed on consumer side.

QA

  • added cypress tests pass
  • using this story, verify the focus is returned to the custom trigger, instead of the original trigger element

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in both MacOS and Windows high contrast 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 self-assigned this Aug 5, 2025
@mgadewoll mgadewoll added the support-duty-flywheel Label for PRs, see eui-private #310 label Aug 5, 2025
@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

cc @mgadewoll

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

cc @mgadewoll

@mgadewoll mgadewoll marked this pull request as ready for review August 5, 2025 17:21
@mgadewoll mgadewoll requested a review from a team as a code owner August 5, 2025 17:21
@weronikaolejniczak weronikaolejniczak self-requested a review August 25, 2025 08:07
Copy link
Contributor

@weronikaolejniczak weronikaolejniczak left a comment

Choose a reason for hiding this comment

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

LGTM! 🟢 Tested the story, verified doc entries are correct, and checked the implementation.

Not that important but the EuiModal / EuiFlyout docs screenshots were hosted on https://private-user-images.githubusercontent.com/ so when I click on them, I don't have access. It's fine though, I used the staging link. Might be worth to take a look into though for future PRs.

Screenshot 2025-08-25 at 11 39 31

@mgadewoll mgadewoll merged commit 28e3f19 into elastic:main Aug 25, 2025
6 checks passed
mgadewoll added a commit to elastic/kibana that referenced this pull request Aug 27, 2025
- `@elastic/eui`: `v106.3.0` ⏩ `v106.4.0`
- `@elastic/eui-theme-borealis`: `v3.3.1` ⏩ `v3.3.2`

[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

## [`v106.4.0`](https://github.com/elastic/eui/releases/v106.4.0)

- Added prop `focusTrapProps` on `EuiModal`
([#8945](elastic/eui#8945))

**Bug fixes**

- Fixed the syntax of the SCSS variable `$euiColorTransparent` to ensure
a valid value ([#8966](elastic/eui#8966))
- Fixed `restrictWidth` not applying to `EuiPageHeaderContent` when only
`children` are used as content
([#8965](elastic/eui#8965))

**Accessibility**

- Fixed an issue where pressing Shift + Tab on the last tabbable element
inside `EuiInputPopover` popover would close the popover unexpectedly
([#8950](elastic/eui#8950))

### `@elastic/eui-theme-borealis`

## [`v3.3.2`](https://github.com/elastic/eui/releases/v3.3.2)

**Bug fixes**

- Fixed the syntax of the SCSS variable `$euiColorTransparent` to ensure
a valid value ([#8966](elastic/eui#8966))
arup-chauhan pushed a commit to arup-chauhan/eui that referenced this pull request Aug 29, 2025
kowalczyk-krzysztof pushed a commit to kowalczyk-krzysztof/kibana that referenced this pull request Aug 30, 2025
- `@elastic/eui`: `v106.3.0` ⏩ `v106.4.0`
- `@elastic/eui-theme-borealis`: `v3.3.1` ⏩ `v3.3.2`

[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

## [`v106.4.0`](https://github.com/elastic/eui/releases/v106.4.0)

- Added prop `focusTrapProps` on `EuiModal`
([elastic#8945](elastic/eui#8945))

**Bug fixes**

- Fixed the syntax of the SCSS variable `$euiColorTransparent` to ensure
a valid value ([elastic#8966](elastic/eui#8966))
- Fixed `restrictWidth` not applying to `EuiPageHeaderContent` when only
`children` are used as content
([elastic#8965](elastic/eui#8965))

**Accessibility**

- Fixed an issue where pressing Shift + Tab on the last tabbable element
inside `EuiInputPopover` popover would close the popover unexpectedly
([elastic#8950](elastic/eui#8950))

### `@elastic/eui-theme-borealis`

## [`v3.3.2`](https://github.com/elastic/eui/releases/v3.3.2)

**Bug fixes**

- Fixed the syntax of the SCSS variable `$euiColorTransparent` to ensure
a valid value ([elastic#8966](elastic/eui#8966))
qn895 pushed a commit to qn895/kibana that referenced this pull request Sep 2, 2025
- `@elastic/eui`: `v106.3.0` ⏩ `v106.4.0`
- `@elastic/eui-theme-borealis`: `v3.3.1` ⏩ `v3.3.2`

[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

## [`v106.4.0`](https://github.com/elastic/eui/releases/v106.4.0)

- Added prop `focusTrapProps` on `EuiModal`
([elastic#8945](elastic/eui#8945))

**Bug fixes**

- Fixed the syntax of the SCSS variable `$euiColorTransparent` to ensure
a valid value ([elastic#8966](elastic/eui#8966))
- Fixed `restrictWidth` not applying to `EuiPageHeaderContent` when only
`children` are used as content
([elastic#8965](elastic/eui#8965))

**Accessibility**

- Fixed an issue where pressing Shift + Tab on the last tabbable element
inside `EuiInputPopover` popover would close the popover unexpectedly
([elastic#8950](elastic/eui#8950))

### `@elastic/eui-theme-borealis`

## [`v3.3.2`](https://github.com/elastic/eui/releases/v3.3.2)

**Bug fixes**

- Fixed the syntax of the SCSS variable `$euiColorTransparent` to ensure
a valid value ([elastic#8966](elastic/eui#8966))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

support-duty-flywheel Label for PRs, see eui-private #310

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants