[Bug]: Web Components Menu not working with FAST when directive

[p15martin]

Component

Menu

Package version

3.0.0-beta.74

@microsoft/fast-element version

2.0.1

Environment

Sorry unavailable

Current Behavior

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();
  }
}

Expected Behavior

Per above

Reproduction

https://stackblitz.com/edit/vitejs-vite-metwzeuy?file=index.html

Steps to reproduce

Please see above

Are you reporting an Accessibility issue?

None

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.