[9.2] [SideNav] Fix popover vs flyout trap focus (#238230)#238925
Merged
kibanamachine merged 1 commit intoelastic:9.2from Oct 14, 2025
Merged
[9.2] [SideNav] Fix popover vs flyout trap focus (#238230)#238925kibanamachine merged 1 commit intoelastic:9.2from
kibanamachine merged 1 commit intoelastic:9.2from
Conversation
## Summary Currently, there is an issue with the popover interactiveness when there's a flyout with a focus trap on the screen. https://github.com/user-attachments/assets/9a94d3da-d468-43df-b16e-bb544f318e9c The changes on this PR patch this behavior in the side nav by only calling the blur callback if the focus is not trapped by the flyout. > [!WARNING] > This is not a **long-term** solution. It's a quick and dirty fix so that things work but it gives us more time to fix the issue meaningfully without affecting the users. ## Details `EuiFlyout` wraps its contents in an [internal focus trap](https://github.com/elastic/eui/blob/ed0c2c0b73239c06766eca1225101032d2a6287b/packages/eui/src/components/flyout/flyout.tsx#L529-L552). The moment you click into the popover, that trap yanks focus back into the flyout. Because `handleBlur` runs on the wrapper div, it sees the blur event, notices that `relatedTarget` is no longer inside the trigger or the popover, and immediately calls `handleClose`. From the user perspective the popover isn't interactive because any click sends focus to the flyout -> the blur handler fires -> the popover closes. When we remove `handleBlur`, we stop clearing `anyPopoverOpen` on blur. That global flag then stays `true` and so the delayed `handleMouseEnter` / `tryOpen` logic bails out (`tryOpen` won’t reopen while it thinks another popover is active; it's purpose is to avoid toggling several popovers at once when navigating with a keyboard). As a result the popover never appears when you focus the trigger via keyboard. So with `handleBlur` present the focus trap keeps closing the popover. Without it the open state never resets, blocking keyboard-triggered opens. `euiIncludeSelectorInFocusTrap` doesn't work (specifically `panelProps={euiIncludeSelectorInFocusTrap.prop}` on `EuiPopover`). It looks like the focus trap captures matched elements only when the flyout opens but the popover panel is added later via a portal so it’s missed. Making the popover be inserted right next to the trigger and not portalled makes the popover a) not visible at all in the fixed layout, b) not position correctly in the grid layout. ## QA After the changes were applied: https://github.com/user-attachments/assets/769b07c3-0657-457f-87fd-8e6410ce7e4d ### Checklist - [ ] Verify that the keyboard navigation works as expected - [ ] I can navigate with tab and arrow keys - [ ] The popover opens on trigger focus - [ ] ~I can press "Enter" to move focus to the popover~ (these do not work in this case) - [ ] ~I can press "Escape" to move focus back to the trigger~ (these do not work in this case) - [ ] Verify that on a page with a flyout (e.g. Discover > Open session - folder icon) mouse clicks work as expected - [ ] I can hover over a trigger and the popover shows - [ ] I can click on an item in the popover and it's triggered - [ ] I can click on an item with submenu in "More" menu and open the nested panel (cherry picked from commit 9ab2151)
9 tasks
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Contributor
💚 Build Succeeded
Metrics [docs]Async chunks
|
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
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.
Backport
This will backport the following commits from
mainto9.2:Questions ?
Please refer to the Backport tool documentation