Note that this is a huge bug blocking usage of the context menu, which is an important feature for something I am working on.

Thanks for raising the issue! For a workaround, use forceVisible: true, and couple them with #if blocks.

@TGlide thanks for the tip! I tried that and unfortunately it seems to break it completely. The overall context menu works fine with that pattern, but I can't open the sub menu at all anymore.

I realize I may be doing this wrong, so let me provide some code:

<script>
  const {
    states: { open },
    elements: { subMenu, subTrigger },
  } = createSubmenu({ forceVisible: true });
</script>

<div {...$subTrigger} use:subTrigger>
  Trigger
</div>

{#if $open}
  <div {...$subMenu} use:subMenu>
     <slot />
  </div>
{/if}

Try only setting the root context menu with forceVisbible

Ok I figured it out and it works now!

Yes agreed to applying forceVisbible on the root context menu. Additionally, createSubmenu returns subOpen not open:

const {
    states: { subOpen },
    elements: { subMenu, subTrigger },
  } = createSubmenu(args);

With Svelte 5, I have the same problem, event with forceVisible: true, and the {#if $subOpen} block.