fix(web-components): descendant check perf regressions (#36018)

Author: radium-v

change/@fluentui-web-components-b94e4cb5-2fad-446a-977a-a7e101d65b0f.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: improve SSR compatibility and component lifecycle management for Menu, Accordion, Dropdown, Tablist, and waitForConnectedDescendants",
+  "packageName": "@fluentui/web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/web-components.api.md

@@ -3243,11 +3243,14 @@ export class Menu extends FASTElement {
     persistOnItemClick?: boolean;
     persistOnItemClickChanged(oldValue: boolean, newValue: boolean): void;
     primaryAction: HTMLSlotElement;
+    // @deprecated
     setComponent(): void;
-    slottedMenuList: MenuList[];
+    slottedMenuList: HTMLElement[];
     // @internal
-    slottedMenuListChanged(prev: MenuList[] | undefined, next: MenuList[] | undefined): void;
+    slottedMenuListChanged(prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
     slottedTriggers: HTMLElement[];
+    // @internal
+    slottedTriggersChanged(prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
     split?: boolean;
     toggleHandler: (e: Event) => void;
     toggleMenu: () => void;

packages/web-components/playwright.config.ts

@@ -2,7 +2,7 @@ import type { PlaywrightTestConfig } from '@playwright/test';
 import { devices } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
-  reporter: 'list',
+  reporter: process.env.CI ? 'github' : 'list',
   retries: 3,
   fullyParallel: process.env.CI ? false : true,
   timeout: process.env.CI ? 10000 : 30000,
@@ -27,6 +27,8 @@ const config: PlaywrightTestConfig = {
     command: 'yarn vite preview test/harness',
     port: 5173,
     reuseExistingServer: true,
+    stderr: 'pipe',
+    stdout: 'pipe',
   },
 };
 

packages/web-components/src/accordion/accordion.ts

@@ -43,7 +43,7 @@ export class Accordion extends FASTElement {
     }
 
     // Clean up single expand mode behavior
-    (expandedItem as BaseAccordionItem)?.expandbutton.removeAttribute('aria-disabled');
+    (expandedItem as BaseAccordionItem)?.expandbutton?.removeAttribute('aria-disabled');
   }
 
   /**
@@ -61,11 +61,15 @@ export class Accordion extends FASTElement {
    * @internal
    */
   public slottedAccordionItemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void {
-    if (this.$fastController.isConnected) {
-      this.setItems();
-    }
+    this.setItems();
   }
 
+  /**
+   * Guard flag to prevent re-entrant calls to setSingleExpandMode.
+   * @internal
+   */
+  private _isAdjusting: boolean = false;
+
   /**
    * Watch for changes to the slotted accordion items `disabled` and `expanded` attributes
    * @internal
@@ -76,8 +80,10 @@ export class Accordion extends FASTElement {
     } else if (propertyName === 'expanded') {
       // we only need to manage single expanded instances
       // such as scenarios where a child is programatically expanded
-      if (source.expanded && this.isSingleExpandMode()) {
+      if (source.expanded && this.isSingleExpandMode() && !this._isAdjusting) {
+        this._isAdjusting = true;
         this.setSingleExpandMode(source);
+        this._isAdjusting = false;
       }
     }
   }
@@ -146,27 +152,25 @@ export class Accordion extends FASTElement {
    * @returns {void}
    */
   private setSingleExpandMode(expandedItem: Element): void {
-    requestAnimationFrame(() => {
-      if (this.accordionItems.length === 0) {
-        return;
-      }
-      const currentItems = Array.from(this.accordionItems);
-      this.activeItemIndex = currentItems.indexOf(expandedItem);
-
-      currentItems.forEach((item: Element, index: number) => {
-        if (isAccordionItem(item)) {
-          if (this.activeItemIndex === index) {
-            item.expanded = true;
-            item.expandbutton.setAttribute('aria-disabled', 'true');
-          } else {
-            item.expanded = false;
-
-            if (!item.hasAttribute('disabled')) {
-              item.expandbutton.removeAttribute('aria-disabled');
-            }
+    if (this.accordionItems.length === 0) {
+      return;
+    }
+    const currentItems = Array.from(this.accordionItems);
+    this.activeItemIndex = currentItems.indexOf(expandedItem);
+
+    currentItems.forEach((item: Element, index: number) => {
+      if (isAccordionItem(item)) {
+        if (this.activeItemIndex === index) {
+          item.expanded = true;
+          item.expandbutton?.setAttribute('aria-disabled', 'true');
+        } else {
+          item.expanded = false;
+
+          if (!item.hasAttribute('disabled')) {
+            item.expandbutton?.removeAttribute('aria-disabled');
           }
         }
-      });
+      }
     });
   }
 
@@ -206,9 +210,7 @@ export class Accordion extends FASTElement {
   connectedCallback(): void {
     super.connectedCallback();
 
-    requestAnimationFrame(() => {
-      this.expandmode = this.expandmode || AccordionExpandMode.multi;
-      this.setItems();
-    });
+    this.expandmode = this.expandmode || AccordionExpandMode.multi;
+    this.setItems();
   }
 }

packages/web-components/src/dropdown/dropdown.base.ts

@@ -232,20 +232,24 @@ export class BaseDropdown extends FASTElement {
 
       notifier.notify('multiple');
 
-      Updates.enqueue(() => {
-        this.options.forEach(option => {
-          option.disabled = option.disabledAttribute || this.disabled;
-          option.name = this.name;
-        });
-
-        this.enabledOptions
-          .filter(x => x.defaultSelected)
-          .forEach((x, i) => {
-            x.selected = this.multiple || i === 0;
+      waitForConnectedDescendants(
+        next,
+        () => {
+          this.options.forEach(option => {
+            option.disabled = option.disabledAttribute || this.disabled;
+            option.name = this.name;
           });
 
-        this.setValidity();
-      });
+          this.enabledOptions
+            .filter(x => x.defaultSelected)
+            .forEach((x, i) => {
+              x.selected = this.multiple || i === 0;
+            });
+
+          this.setValidity();
+        },
+        { idleCallback: true },
+      );
 
       if (AnchorPositioningCSSSupported) {
         // The `anchor-name` property seems to not be isolated between instances in Safari Technology Preview 220 (18.4).
@@ -801,6 +805,12 @@ export class BaseDropdown extends FASTElement {
     return true;
   }
 
+  /**
+   * Guard flag to prevent reentrant calls to `insertControl`.
+   * @internal
+   */
+  private _insertingControl = false;
+
   /**
    * Inserts the control element based on the dropdown type.
    *
@@ -809,6 +819,11 @@ export class BaseDropdown extends FASTElement {
    * This method can be overridden in derived classes to provide custom control elements, though this is not recommended.
    */
   protected insertControl(): void {
+    if (this._insertingControl) {
+      return;
+    }
+
+    this._insertingControl = true;
     this.controlSlot?.assignedNodes().forEach(x => this.removeChild(x));
 
     if (this.type === DropdownType.combobox) {
@@ -817,6 +832,7 @@ export class BaseDropdown extends FASTElement {
     }
 
     dropdownButtonTemplate.render(this, this);
+    this._insertingControl = false;
   }
 
   /**
@@ -930,7 +946,9 @@ export class BaseDropdown extends FASTElement {
    */
   public selectOption(index: number = this.selectedIndex, shouldEmit: boolean = false): void {
     this.listbox.selectOption(index);
-    this.control.value = this.displayValue;
+    if (this.control) {
+      this.control.value = this.displayValue;
+    }
 
     this.setValidity();
 
@@ -951,20 +969,22 @@ export class BaseDropdown extends FASTElement {
    * @internal
    */
   public setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void {
-    if (this.$fastController.isConnected) {
-      if (this.disabled || !this.required) {
-        this.elementInternals.setValidity({});
-        return;
-      }
-
-      const valueMissing = this.required && this.listbox.selectedOptions.length === 0;
+    if (!this.elementInternals) {
+      return;
+    }
 
-      this.elementInternals.setValidity(
-        { valueMissing, ...flags },
-        message ?? this.validationMessage,
-        anchor ?? this.control,
-      );
+    if (this.disabled || !this.required) {
+      this.elementInternals.setValidity({});
+      return;
     }
+
+    const valueMissing = this.required && this.listbox.selectedOptions.length === 0;
+
+    this.elementInternals.setValidity(
+      { valueMissing, ...flags },
+      message ?? this.validationMessage,
+      anchor ?? this.control,
+    );
   }
 
   /**

packages/web-components/src/dropdown/dropdown.styles.ts

@@ -4,7 +4,7 @@ import {
   typographyBody2Styles,
   typographyCaption1Styles,
 } from '../styles/partials/typography.partials.js';
-import { flipBlockState, openState, placeholderShownState } from '../styles/states/index.js';
+import { openState, placeholderShownState } from '../styles/states/index.js';
 import {
   borderRadiusMedium,
   borderRadiusNone,
@@ -233,6 +233,7 @@ export const styles = css`
     color: ${colorNeutralForegroundDisabled};
   }
 
+  ::slotted(:not([slot]):not([popover])),
   ::slotted([popover]:not(:popover-open)) {
     display: none;
   }