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

[janechu]

At a glance this appears to be an issue with the fluent-ui web component not the when directive, @davatron5000 do you have any insight on this one?

[davatron5000]

Thanks @p15martin for filing. I think we've seen this issue before with child components and Updates.enqueue() that we were unable to consistently reproduce (it sometimes happens over the network). Knowing when triggers the issue helps a lot. We'll try to get a fix out soon.

I see you filed an issue over at microsoft/fluentui#33589 and I assigned that to myself this morning and will follow up over there. @janechu you can close this issue.