[Bug]: Web component DropdownMenu and Select arrow key bug

[pmairoldi]

Environment

Node version: v18.20.3
Radix Vue version: 1.9.12
Vue version: 3.5.13

Client OS: macOS 12.7.6
Browser: Chromium Engine Version 131.0.6778.265

Link to minimal reproduction

https://stackblitz.com/edit/nexbpjt8-wvsqpwgv?file=src%2Fcustom-elements%2FCustomElement.ce.vue

Steps to reproduce

Related issue #1003

• Create a custom element with a DropdownMenu or a Select
• Make sure the Portal has the prop disabled set to true
• Click toggle to open DropdownMenuContent or SelectContent
• Press down arrow to navigate the options

This can be tested using the reproduction link.

Describe the bug

Since the component is inside a custom element it seems like the current activeElement is incorrect. From my tests document.activeElement when using inside a custom-element is the custom element itself rather than the selected option.

I think the follow code may be the problem line may be the problem:

• https://github.com/unovue/radix-vue/blob/290ae2914f2ce405c4af2c3807f46d9f191e3f34/packages/radix-vue/src/Menu/MenuContentImpl.vue#L179
• https://github.com/unovue/radix-vue/blob/290ae2914f2ce405c4af2c3807f46d9f191e3f34/packages/radix-vue/src/Menu/utils.ts#L38

It seems like this has already been addressed for radio groups so possibly the same fix could work #1314

Expected behavior

I expect the arrow key navigation to work the same inside a custom element as it does outside.

Context & Screenshots (if applicable)

Screen.Recording.2025-01-17.at.8.39.11.PM.mov

[zernonia]

Thanks for the issue @pmairoldi ! Thanks again for reporting similar issue as previous.
I believe the solution should be quite the same. PR is welcomed!