[Context Menu] Can't access sub menu when there is a group as well

[Eatham532]

Describe the bug When using a context menu, you can't access a sub menu when a group is also being used

To Reproduce Steps to reproduce the behavior:

1. Create a Context Menu with a sub menu and a group
2. View bug when navigating with mouse and arrow keys

Expected behavior You should be able to access the sub menu

Screenshots This video shows the bug when using the mouse and keyboard to navigate. https://github.com/kobaltedev/kobalte/assets/78714349/d98083b3-2f74-4da7-9de0-937d39ce2fa6

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Chromium
• Version: 124.0.6367.29

[jer3m01]

Could you provide a reproduction on https://playground.solidjs.com/, stackblitz or github.

[Eatham532]

Here it is link. I did some debugging and it seems like it is an issue with the css styling.

[jer3m01]

The <ContextMenuPortal/> is missing around your <ContextMenuContent/> and <ContextMenuSubContent/>:

  <ContextMenu>
    <ContextMenuTrigger>Trigger</ContextMenuTrigger>
+   <ContextMenuPortal>
      <ContextMenuContent>
        <ContextMenuLabel>Hmm</ContextMenuLabel>
        ...
        <ContextMenuSub>
          <ContextMenuSubTrigger>More</ContextMenuSubTrigger>
+         <ContextMenuPortal>
            <ContextMenuSubContent>
              <ContextMenuItem>More</ContextMenuItem>
              ...
            </ContextMenuSubContent>
+         </ContextMenuPortal>
        </ContextMenuSub>
        <ContextMenuSeparator />
        ...
+  </ContextMenuPortal>
  </ContextMenu>

For more information checkout https://kobalte.dev/docs/core/components/context-menu#anatomy