test(focus-scope): shadow root issue example

[ldelhommeau]

#1667

This is a reproduction branch about the focus isse mentionnedn in #1667 :

When using an input field inside a Dialog that dynamically updates content within the Dialog, the focus keeps switching back to DialogContent, disrupting the user experience.

What is not working

When rendering a Dialogcomponent (or anything that can be teleported) into the shadow root.
Then rendering another component that will update the DOM (here a combobox opening a list) at some point.
If we have the focus on the inner component (e.g. combobox) when the DOM is updated, we loose the focus.

How to reproduce

• clone the repo
• install dependencies
• run pnpm story:dev
• wait for all stories to load
• go on http://localhost:6006/__sandbox.html?storyId=packages-core-src-combobox-story-comboboxshadowroot-story-vue&variantId=packages-core-src-combobox-story-comboboxshadowroot-story-vue-0
• click on the button to open the dialog inside the shadow root
• focus the input inside the dialog (by click on keyboard)
• start typing inside the input
• you should loose the focus

Expected behaviour

The focus should not be lost.
Here is an example of how it should behave.

Note

Here everything is teleported into the body so it's working. It would be nice to have it working inside the shadow-root:

Screen.Recording.2025-12-10.at.11.41.27.mp4

Faulty behaviour

Here, everything is mounted into shadow-root, the portal target as well. So the Dialog overlay and content will mount inside the portal-target within shadow root. The Combobox will be mounted inside the Dialog content, and its list will be rendered inline.
The focus is lost when we start typing and the list is shown:

Screen.Recording.2025-12-10.at.11.40.14.1.mp4

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/reka-ui@2331

commit: dc77f08