Keyboard navigation (Arrow Up/Down) not working for Select component when rendered inside Shadow DOM with portal targeting Shadow Root

[FelixH2012]

trafficstars

Dependencies check up

• [x] I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

8.0.2

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

All

Describe the bug

When rendering a Select component inside a Shadow DOM and explicitly setting the portal prop to the shadow root, the component is visually rendered as expected within the Shadow DOM context. However, keyboard navigation using the arrow up/down keys does not function as intended. Specifically, the options within the Select menu cannot be traversed using these keys.

Steps to Reproduce:

Create a web component using Shadow DOM.

Render a Select component within this Shadow DOM.

Set the portal (or equivalent) prop to the shadow root to ensure the dropdown renders inside the Shadow DOM.

Open the select menu and attempt to navigate using the arrow keys.

Expected Behavior: Arrow up/down keys should allow users to navigate through the list of options, as they would in a standard DOM context.

If possible, include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/p/devbox/epic-cdn-3myf6h?embed=1&file=%2Fsrc%2FShadowSelectElement.jsx

Possible fix

No response

Self-service

• [ ] I would be willing to implement a fix for this issue