fix(web-components): preserve radio state after deferred upgrade

Rebuild PR on current master after an earlier squash pulled in unrelated
repository changes. Parent components now collect matching child tags only
after FAST upgrades them, and refresh once pending definitions resolve.

Covers RadioGroup, Accordion, Listbox, MenuList, Tree, and TreeItem.
Fixes #36239

Author: KirtiRamchandani

change/@fluentui-web-components-6f78c014-b0c7-4dd8-8ad7-93c0521f8c76.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix(web-components): defer parent child collection until custom elements upgrade",
+  "packageName": "@fluentui/web-components",
+  "email": "kirtiar15502@gmail.com",
+  "dependentChangeType": "patch"
+}

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

@@ -1,7 +1,8 @@
-import { attr, FASTElement, Observable, observable, Updates } from '@microsoft/fast-element';
+import { attr, FASTElement, Observable, observable } from '@microsoft/fast-element';
 import { BaseAccordionItem } from '../accordion-item/accordion-item.base.js';
-import { waitForConnectedDescendants } from '../utils/request-idle-callback.js';
 import { isAccordionItem } from '../accordion-item/accordion-item.options.js';
+import { getUpgradedCustomElements, runAfterPendingDefinitions } from '../utils/custom-elements.js';
+import { waitForConnectedDescendants } from '../utils/request-idle-callback.js';
 import { AccordionExpandMode } from './accordion.options.js';
 
 /**
@@ -11,7 +12,7 @@ import { AccordionExpandMode } from './accordion.options.js';
  * @tag fluent-accordion
  *
  * @slot - The default slot for the accordion items
- * @fires { Event } change - Fires a custom 'change' event when the active item changes
+ * @fires change - Fires a custom 'change' event when the active item changes
  *
  * @public
  */
@@ -110,19 +111,26 @@ export class Accordion extends FASTElement {
    */
   private setItems = (): void => {
     waitForConnectedDescendants(this, () => {
-      if (!this.slottedAccordionItems?.length) {
+      if (this.slottedAccordionItems.length === 0) {
         return;
       }
 
-      // Get all existing children and remove event listeners
+      this.removeItemListeners(this.accordionItems ?? []);
+
       const children: Element[] = Array.from(this.children);
-      this.removeItemListeners(children);
+      const accordionItems = getUpgradedCustomElements(children, isAccordionItem);
+
+      runAfterPendingDefinitions(children, isAccordionItem, () => {
+        if (this.isConnected) {
+          this.setItems();
+        }
+      });
 
       // Resubscribe to the `disabled` attribute of all children
-      children.forEach((child: Element) => Observable.getNotifier(child).subscribe(this, 'disabled'));
+      accordionItems.forEach((child: Element) => Observable.getNotifier(child).subscribe(this, 'disabled'));
 
       // Add event listeners to each non-disabled AccordionItem
-      this.accordionItems = children.filter(child => !child.hasAttribute('disabled'));
+      this.accordionItems = accordionItems.filter(child => !child.hasAttribute('disabled'));
       this.accordionItems.forEach((item: Element, index: number) => {
         item.addEventListener('click', this.expandedChangedHandler);
         // Subscribe to the expanded attribute of the item

packages/web-components/src/listbox/listbox.spec.ts

@@ -148,3 +148,25 @@ test.describe('Listbox', () => {
     await expect(element).toHaveJSProperty('dropdown', undefined);
   });
 });
+
+test.describe('Listbox upgrade order', () => {
+  test('should apply multiple state when options upgrade after the listbox', async ({ fastPage }) => {
+    await fastPage.page.goto('/test/parent-child-upgrade-order.html');
+
+    const result = await fastPage.page.evaluate(async () => {
+      return (
+        window as unknown as {
+          runListboxUpgradeOrderTest(): Promise<{
+            firstOptionMultiple: boolean;
+            hasOwnMultiple: boolean;
+            optionsLength: number;
+          }>;
+        }
+      ).runListboxUpgradeOrderTest();
+    });
+
+    expect(result.optionsLength).toBe(3);
+    expect(result.firstOptionMultiple).toBe(true);
+    expect(result.hasOwnMultiple).toBe(false);
+  });
+});

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

@@ -2,6 +2,7 @@ import { FASTElement, observable, Updates } from '@microsoft/fast-element';
 import type { BaseDropdown } from '../dropdown/dropdown.base.js';
 import type { DropdownOption } from '../option/option.js';
 import { isDropdownOption } from '../option/option.options.js';
+import { getUpgradedCustomElements, runAfterPendingDefinitions } from '../utils/custom-elements.js';
 import { toggleState } from '../utils/element-internals.js';
 import { waitForConnectedDescendants } from '../utils/request-idle-callback.js';
 import { uniqueId } from '../utils/unique-id.js';
@@ -83,6 +84,7 @@ export class Listbox extends FASTElement {
     next?.forEach((option, index) => {
       option.elementInternals.ariaPosInSet = `${index + 1}`;
       option.elementInternals.ariaSetSize = `${next.length}`;
+      option.multiple = !!this.multiple;
     });
   }
 
@@ -240,11 +242,16 @@ export class Listbox extends FASTElement {
   public slotchangeHandler(e?: Event): void {
     waitForConnectedDescendants(this, () => {
       if (this.defaultSlot) {
-        const options = this.defaultSlot
-          .assignedElements()
-          .filter<DropdownOption>((option): option is DropdownOption => isDropdownOption(option));
+        const assignedElements = this.defaultSlot.assignedElements();
+        const options = getUpgradedCustomElements(assignedElements, isDropdownOption);
 
         this.options = options;
+
+        runAfterPendingDefinitions(assignedElements, isDropdownOption, () => {
+          if (this.isConnected) {
+            this.slotchangeHandler();
+          }
+        });
       }
     });
   }

packages/web-components/src/menu-list/menu-list.base.ts

@@ -1,8 +1,9 @@
 import { FASTElement, Observable, observable, Updates } from '@microsoft/fast-element';
-import { isHTMLElement } from '../utils/typings.js';
 import type { MenuItemColumnCount } from '../menu-item/menu-item.js';
 import type { MenuItem } from '../menu-item/menu-item.js';
 import { isMenuItem, MenuItemRole } from '../menu-item/menu-item.options.js';
+import { isUpgradedCustomElement, runAfterPendingDefinitions } from '../utils/custom-elements.js';
+import { isHTMLElement } from '../utils/typings.js';
 
 /**
  * A Base MenuList Custom HTML Element.
@@ -49,11 +50,6 @@ export class BaseMenuList extends FASTElement {
    */
   public connectedCallback(): void {
     super.connectedCallback();
-
-    if (!this.slot && this.isNestedMenu()) {
-      this.slot = 'submenu';
-    }
-
     Updates.enqueue(() => {
       // wait until children have had a chance to
       // connect before setting/checking their props/attributes
@@ -112,7 +108,15 @@ export class BaseMenuList extends FASTElement {
       Observable.getNotifier(child).subscribe(this, 'hidden');
     });
 
-    this.menuChildren = children.filter(child => !child.hasAttribute('hidden'));
+    runAfterPendingDefinitions(children, isMenuItem, () => {
+      if (this.isConnected) {
+        this.setItems();
+      }
+    });
+
+    this.menuChildren = children.filter(
+      child => !child.hasAttribute('hidden') && (!isMenuItem(child) || isUpgradedCustomElement(child)),
+    );
 
     /**
      * Set the indent attribute on MenuItem elements based on their

packages/web-components/src/radio-group/radio-group.base.ts

@@ -1,14 +1,13 @@
-import { attr, FASTElement, Observable, observable } from '@microsoft/fast-element';
+import { attr, FASTElement, Observable, observable, Updates } from '@microsoft/fast-element';
 import type { Radio } from '../radio/radio.js';
 import { isRadio } from '../radio/radio.options.js';
+import { getUpgradedCustomElements, runAfterPendingDefinitions } from '../utils/custom-elements.js';
 import { RadioGroupOrientation } from './radio-group.options.js';
 
 /**
  * A Base Radio Group Custom HTML Element.
  * Implements the {@link https://w3c.github.io/aria/#radiogroup | ARIA `radiogroup` role}.
  *
- * @fires { Event } change - Fires a custom 'change' event when the checked radio changes
- *
  * @public
  */
 export class BaseRadioGroup extends FASTElement {
@@ -227,7 +226,17 @@ export class BaseRadioGroup extends FASTElement {
    * @param next - the current slotted radios
    */
   slottedRadiosChanged(prev: Radio[] | undefined, next: Radio[]): void {
-    this.radios = [...this.querySelectorAll('*')].filter(x => isRadio(x)) as Radio[];
+    Updates.enqueue(() => {
+      const radioElements = [...this.querySelectorAll('*')].filter((element): element is Radio => isRadio(element));
+
+      this.radios = getUpgradedCustomElements(radioElements, isRadio);
+
+      runAfterPendingDefinitions(radioElements, isRadio, () => {
+        if (this.isConnected) {
+          this.radios = getUpgradedCustomElements([...this.querySelectorAll('*')], isRadio);
+        }
+      });
+    });
   }
 
   /**

packages/web-components/src/tree-item/tree-item.base.ts

@@ -1,17 +1,8 @@
 import { attr, css, type ElementStyles, FASTElement, observable } from '@microsoft/fast-element';
 import { toggleState } from '../utils/element-internals.js';
-import { maybeSetAutoFocus } from '../utils/autofocus.js';
+import { getUpgradedCustomElements, runAfterPendingDefinitions } from '../utils/custom-elements.js';
 import { isTreeItem } from './tree-item.options.js';
 
-/**
- * Base class for Tree Item Custom HTML Element.
- * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li | `<li>`} element.
- *
- * @fires { ToggleEvent } toggle - Fires when the expanded state changes
- * @fires { Event } change - Fires when the selected state changes
- *
- * @public
- */
 export class BaseTreeItem extends FASTElement {
   /**
    * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
@@ -39,18 +30,6 @@ export class BaseTreeItem extends FASTElement {
     this.elementInternals.role = 'treeitem';
   }
 
-  connectedCallback(): void {
-    super.connectedCallback();
-
-    this.tabIndex = Number(this.getAttribute('tabindex') || '0');
-
-    if (isTreeItem(this.parentElement)) {
-      this.slot ||= 'item';
-    }
-
-    maybeSetAutoFocus(this);
-  }
-
   /**
    * When true, the control will be appear expanded by user interaction.
    * When true, the control will be appear expanded by user interaction.
@@ -75,7 +54,7 @@ export class BaseTreeItem extends FASTElement {
       newState: next ? 'open' : 'closed',
     });
     toggleState(this.elementInternals, 'expanded', next);
-    if (this.childTreeItems?.length) {
+    if (this.childTreeItems && this.childTreeItems.length > 0) {
       this.elementInternals.ariaExpanded = next ? 'true' : 'false';
       // Update focusgroup attributes after subtree show/hide rendering is done.
       requestAnimationFrame(() => {
@@ -115,11 +94,8 @@ export class BaseTreeItem extends FASTElement {
    */
   protected selectedChanged(prev: boolean, next: boolean): void {
     this.$emit('change');
-
-    if (this.elementInternals) {
-      toggleState(this.elementInternals, 'selected', next);
-      this.elementInternals.ariaSelected = next ? 'true' : 'false';
-    }
+    toggleState(this.elementInternals, 'selected', next);
+    this.elementInternals.ariaSelected = next ? 'true' : 'false';
   }
 
   /**
@@ -235,6 +211,14 @@ export class BaseTreeItem extends FASTElement {
 
   /** @internal */
   public handleItemSlotChange() {
-    this.childTreeItems = this.itemSlot.assignedElements().filter(el => isTreeItem(el));
+    const assignedElements = this.itemSlot.assignedElements();
+
+    this.childTreeItems = getUpgradedCustomElements(assignedElements, isTreeItem);
+
+    runAfterPendingDefinitions(assignedElements, isTreeItem, () => {
+      if (this.isConnected) {
+        this.handleItemSlotChange();
+      }
+    });
   }
 }

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

@@ -1,6 +1,7 @@
 import { FASTElement, observable } from '@microsoft/fast-element';
 import type { BaseTreeItem } from '../tree-item/tree-item.base.js';
 import { isTreeItem } from '../tree-item/tree-item.options.js';
+import { getUpgradedCustomElements, runAfterPendingDefinitions } from '../utils/custom-elements.js';
 
 export class BaseTree extends FASTElement {
   /**
@@ -160,7 +161,15 @@ export class BaseTree extends FASTElement {
 
   /** @internal */
   public handleDefaultSlotChange() {
-    this.childTreeItems = this.defaultSlot.assignedElements().filter(el => isTreeItem(el));
+    const assignedElements = this.defaultSlot.assignedElements();
+
+    this.childTreeItems = getUpgradedCustomElements(assignedElements, isTreeItem);
+
+    runAfterPendingDefinitions(assignedElements, isTreeItem, () => {
+      if (this.isConnected) {
+        this.handleDefaultSlotChange();
+      }
+    });
   }
 
   /**

packages/web-components/src/tree/tree.spec.ts

@@ -424,3 +424,27 @@ test.describe('Tree', () => {
     await expect(treeItems.nth(2)).toBeFocused();
   });
 });
+
+test.describe('Tree upgrade order', () => {
+  test('should apply tree state when tree items upgrade after the tree', async ({ fastPage }) => {
+    await fastPage.page.goto('/test/parent-child-upgrade-order.html');
+
+    const result = await fastPage.page.evaluate(async () => {
+      return (
+        window as unknown as {
+          runTreeUpgradeOrderTest(): Promise<{
+            childTreeItemsLength: number;
+            currentSelectedLocalName: string | undefined;
+            firstItemSize: string;
+            hasOwnSize: boolean;
+          }>;
+        }
+      ).runTreeUpgradeOrderTest();
+    });
+
+    expect(result.childTreeItemsLength).toBe(2);
+    expect(result.currentSelectedLocalName).toContain('tree-item');
+    expect(result.firstItemSize).toBe('medium');
+    expect(result.hasOwnSize).toBe(false);
+  });
+});

packages/web-components/src/utils/custom-elements.ts

@@ -0,0 +1,41 @@
+type ElementPredicate<T extends Element> = (element: Element) => element is T;
+
+/**
+ * Returns true once FAST has upgraded the element instance.
+ */
+export function isUpgradedCustomElement(element: Element): boolean {
+  return '$fastController' in element;
+}
+
+/**
+ * Filters matching custom elements down to instances that have finished upgrading.
+ */
+export function getUpgradedCustomElements<T extends Element>(
+  elements: readonly Element[],
+  predicate: ElementPredicate<T>,
+): T[] {
+  return elements.filter((element): element is T => predicate(element) && isUpgradedCustomElement(element));
+}
+
+/**
+ * Runs a callback after all matching, still-pending custom element tag definitions resolve.
+ */
+export function runAfterPendingDefinitions<T extends Element>(
+  elements: readonly Element[],
+  predicate: ElementPredicate<T>,
+  callback: () => void,
+): void {
+  const pendingTagNames = [
+    ...new Set(
+      elements
+        .filter(element => predicate(element) && !isUpgradedCustomElement(element))
+        .map(element => element.localName),
+    ),
+  ];
+
+  if (pendingTagNames.length === 0) {
+    return;
+  }
+
+  Promise.all(pendingTagNames.map(tagName => customElements.whenDefined(tagName))).then(callback);
+}