Web Components Menu not working with FAST when directive

[p15martin]

Per the example below, when using the Fluent Web Components menu with the FAST when directive it renders menu open and it is non-functional (e.g. the trigger button does not toggle the menu).

const menu= html`
  <fluent-menu style="--menu-max-height: auto;">
  <fluent-menu-button
    aria-label="Toggle Menu"
    appearance="primary"
    slot="trigger"
  >
    Toggle Menu
  </fluent-menu-button>

  <fluent-menu-list>
    <fluent-menu-item>Menu item 1</fluent-menu-item>
    <fluent-menu-item>Menu item 2</fluent-menu-item>
    <fluent-menu-item>Menu item 3</fluent-menu-item>
    <fluent-menu-item>Menu item 4</fluent-menu-item>
  </fluent-menu-list>
</fluent-menu>
`;

export const template = html<MyView>`
  ${when(view => view.showMenu, menu)}
`;

On investigation, the problem is due to setComponent(), when called by connectedCallback() the if condition evals to false as both slottedMenuList and slottedTriggers are empty. As such, the popup attribute is not added to menu list.

The menu works as expected when not called from ${when}, but I assume the reason for calling Updates.enqueue(() => this.setComponent()); is to allow the template to render and for slotted to populate slottedMenuList and slottedTriggers before calling setComponent(). I'm unclear why ${when} throws it off.

As a workaround, I subclassed Menu as follows;

import {
  Menu as FluentMenu
} from '@fluentui/web-components';

export class Menu extends FluentMenu {
  public slottedMenuListChanged(): void {
    this.setComponent();
  }

  public slottedTriggersChanged(): void {
    this.setComponent();
  }
}