Dropdown Submenu won't stay open after migration

[LiamKrenn]

Hello,
since migrating to Svelte 5, I experience an issue with the subcontent of the dropdown menu. It closes as soon as you start hovering over it.
I've attached a video that demonstrates this effect:
https://youtu.be/03ow-Dn6U1g

[huntabyte]

Can you provide a code reproduction via a github repo so I can take a look? This shouldn't be happening

[Noah-2005]

Hey @LiamKrenn
It seems that the problem is that you are using the DropdownMenu.RadioGroup to wrap the DropdownMenu.Sub

<DropdownMenu.Root>
	<DropdownMenu.Trigger class="bg-slate-300 p-3">Open</DropdownMenu.Trigger>
	<DropdownMenu.Content class="w-56">
		<DropdownMenu.RadioGroup bind:value>
			<DropdownMenu.Sub>
				<DropdownMenu.SubTrigger>
					<span>Invite users</span>
				</DropdownMenu.SubTrigger>
				<DropdownMenu.SubContent>
					<DropdownMenu.RadioItem value="e1">
						<span>Email 1</span>
					</DropdownMenu.RadioItem>
					...
				</DropdownMenu.SubContent>
			</DropdownMenu.Sub>
		</DropdownMenu.RadioGroup>
	</DropdownMenu.Content>
</DropdownMenu.Root>

Instead it should be:

<DropdownMenu.Root>
	<DropdownMenu.Trigger class="bg-slate-300 p-3">Open</DropdownMenu.Trigger>
	<DropdownMenu.Content class="w-56">
		
			<DropdownMenu.Sub>
				<DropdownMenu.SubTrigger>
					<span>Invite users</span>
				</DropdownMenu.SubTrigger>
				<DropdownMenu.SubContent>
                                     <DropdownMenu.RadioGroup bind:value>
					<DropdownMenu.RadioItem value="e1">
						<span>Email 1</span>
					</DropdownMenu.RadioItem>
					...
                                    </DropdownMenu.RadioGroup> 
				</DropdownMenu.SubContent>
			</DropdownMenu.Sub>
	</DropdownMenu.Content>
</DropdownMenu.Root>

Suppose you want multiple submenus each with radios for the same value. You should instead have a separate radio group for each submenu and bind each to your value.

I don't think it should be an issue as it seems like an unintended implementation to have your submenu be a child of a radio group.

[LiamKrenn]

Well it is the easiest way to have multiple submenus that bind to the same value.
And it worked in Svelte 4 so maybe it should work? I don't know

[Noah-2005]

IDK to me it seems kind of hacky to have the submenu be the child of a radiogroup. That could just be me.

[LiamKrenn]

Well, would be nice to have an official answer @huntabyte

[huntabyte]

IDK to me it seems kind of hacky to have the submenu be the child of a radiogroup. That could just be me.

Agreed. I'd be curious to see what the accessibility tree looks like with that setup and if it even makes sense.

If you want a shared value between them, why not just bind the same value to two radio groups? Or what is the use case for having the same radio group span across multiple menus like that? I don't know the case so I can't be certain, but it feels like that may be confusing for users when going into one menu and changing something, results in another item change?