[Flyout System] Prevent race condition crash when closing managed flyouts#9356
Merged
tsullivan merged 9 commits intoelastic:mainfrom Feb 6, 2026
Merged
Conversation
37029b9 to
a00cd56
Compare
a00cd56 to
8025326
Compare
tsullivan
commented
Feb 4, 2026
| } | ||
| }, [currentSession, flyoutId, level]); | ||
|
|
||
| useEffect(() => { |
Member
Author
There was a problem hiding this comment.
This secondary useEffect was a duplicate cleanup effect. It was removed because it was redundant: there already is a cleanup function in the primary effect on lines 188-204 ('useLayoutEffect`).
acstll
approved these changes
Feb 6, 2026
Contributor
acstll
left a comment
There was a problem hiding this comment.
🟢 Tested the code locally, using your branch, with a build of Kibana, and can confirm the changes fix the issues.
Only leaving a comment on the test file. Everything else in the code looks good to me. Thank you @tsullivan
packages/eui/src/components/flyout/manager/flyout_managed.test.tsx
Outdated
Show resolved
Hide resolved
Contributor
|
@tsullivan this being a bug fix going into |
Collaborator
💚 Build SucceededHistory
|
Collaborator
💚 Build Succeeded
History
|
mgadewoll
added a commit
to elastic/kibana
that referenced
this pull request
Feb 10, 2026
## Dependency updates - `@elastic/eui`: v112.2.0 ⏩ v112.3.0 - `@elastic/eslint-plugin-eui`: v2.7.0 ⏩ v2.8.0 --- ## Package updates ### `@elastic/eui` [v112.3.0](https://github.com/elastic/eui/releases/tag/v112.3.0) - Added new `server` icon. ([#9355](elastic/eui#9355)) - Added `className` support to `EuiMarkdownEditor`'s `toolbarProps` for custom toolbar styling ([#9349](elastic/eui#9349)) - Updated `EuiFilePicker` to use the `upload` icon to better indicate uploads. ([#9351](elastic/eui#9351)) - Exported the flyout system store singleton and added an event observer for emitting close session events ([#9347](elastic/eui#9347)) - Updated `EuiIcon` to use standard dynamic imports for icon assets, enabling native support for modern bundlers (Rollup, Parcel) and improving initial load performance ([#9342](elastic/eui#9342)) **Bug fixes** - Fixed a potential crash in the flyout system: due to asynchronous state updates and React's batching behavior, it was possible to experience a crash when closing a managed flyout. ([#9356](elastic/eui#9356)) ### `@elastic/eslint-plugin-eui` v2.8.0 - Added new `icon-accessibility-rules` rule. ([#9357](elastic/eui#9357)) - Added new `badge-accessibility-rules` rule. ([#9354](elastic/eui#9354))
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
4 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.
Summary
Follows #9346
Re-close elastic/kibana#250177
Fix: Prevent race condition crash when closing managed flyouts
Fixes a production-only crash (
NotFoundError: Failed to execute 'insertBefore') that occurred when closing overlay flyouts in rapid succession.Root Cause:
useEffect(flyoutExistsInManager)Changes:
flushSyncin theonClosehandler to force synchronous state update completion before the DOM cleanupuseLayoutEffectfor synchronously registering the flyout with the manager before DOM updates. All lifecycle management (setup and cleanup) is consolidated into this effect.flyoutExistsInManagerto prevent re-registration loops during cleanupWhy are we making this change?
Stability / bug fix
Screenshots #
The original bug was only evident when running with a production build in Kibana, because that environment leverages batched React updates. The test case from these recordings uses a Kibana build with a hacked Home page to showcasing a flyout button to exhibit a crash problem.
before.-.Screen.Recording.2026-02-04.at.3.23.15.PM.mov
after.-.Screen.Recording.2026-02-04.at.3.23.15.PM.mov
Impact to users
Testing
Or build and test this Kibana branch: https://github.com/tsullivan/kibana/tree/test-eui-9346
QA
Remove or strikethrough items that do not apply to your PR.
General checklist
[ ] 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[ ] Added documentation[ ] Props have proper autodocs (using@defaultif default values are missing) and playground toggles[ ] Checked Code Sandbox works for any docs examples[ ] Updated visual regression tests[ ] 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)[ ] 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)