fix(aria/menu): submenu collapsing when content inside it changes

src/aria/menu/menu.spec.ts

@@ -799,6 +799,42 @@ describe('Menu Trigger Pattern', () => {
       expect(fixture.componentInstance.itemSelected).toHaveBeenCalledWith('Apple');
     });
   });
+
+  it('should keep nested submenus open when the DOM inside them changes', async () => {
+    const nestedFixture = TestBed.createComponent(NestedMenuExample);
+    await nestedFixture.whenStable();
+
+    const getNestedItem = (text: string) =>
+      nestedFixture.debugElement
+        .queryAll(By.directive(MenuItem))
+        .map(debugEl => debugEl.nativeElement as HTMLElement)
+        .find(item => item.textContent?.trim() === text)!;
+
+    const press = async (text: string, key: string) => {
+      getNestedItem(text).dispatchEvent(new KeyboardEvent('keydown', {key, bubbles: true}));
+      await nestedFixture.whenStable();
+    };
+
+    const trigger = nestedFixture.debugElement.query(By.directive(MenuTrigger))
+      .nativeElement as HTMLElement;
+    trigger.focus();
+    trigger.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter', bubbles: true}));
+    await nestedFixture.whenStable();
+    await press('Apple', 'ArrowDown');
+    await press('Berries', 'ArrowRight');
+    await press('Blueberry', 'ArrowDown');
+    await press('Strawberry', 'ArrowRight');
+
+    const wildStrawberry = getNestedItem('Wild Strawberry');
+    expect(document.activeElement).toBe(wildStrawberry);
+
+    nestedFixture.componentInstance.showBadge.set(true);
+    await waitForMicrotasks();
+    await nestedFixture.whenStable();
+
+    expect(getNestedItem('Strawberry').getAttribute('aria-expanded')).toBe('true');
+    expect(document.activeElement).toBe(wildStrawberry);
+  });
 });
 
 describe('CDK Overlay Menu Pattern', () => {
@@ -1371,6 +1407,36 @@ class ShuffledMenuExample {
   items = signal([{value: 'Apple'}, {value: 'Banana'}, {value: 'Cherry'}]);
 }
 
+@Component({
+  template: `
+    <button ngMenuTrigger [menu]="rootMenu">Open</button>
+
+    <div ngMenu [expansionDelay]="0" #rootMenu="ngMenu">
+      <div ngMenuItem value="Apple">Apple</div>
+      <div ngMenuItem value="Berries" [submenu]="berriesMenu">Berries</div>
+
+      <div ngMenu [expansionDelay]="0" #berriesMenu="ngMenu">
+        <div ngMenuItem value="Blueberry">Blueberry</div>
+        <div ngMenuItem value="Strawberry" [submenu]="strawberryMenu">Strawberry</div>
+
+        <div ngMenu [expansionDelay]="0" #strawberryMenu="ngMenu">
+          <div ngMenuItem value="Wild Strawberry">
+            Wild Strawberry
+            @if (showBadge()) {
+              <span></span>
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  imports: [Menu, MenuItem, MenuTrigger],
+  changeDetection: ChangeDetectionStrategy.Eager,
+})
+class NestedMenuExample {
+  showBadge = signal(false);
+}
+
 @Component({
   template: `
     <div ngMenuBar>

src/aria/private/utils/collection.spec.ts

@@ -74,6 +74,15 @@ describe('SortedCollection with real directives', () => {
     expect(orderedItems[0].value).toBe('C');
     expect(orderedItems[2].value).toBe('A');
   });
+
+  it('should keep the same ordered items when the DOM changes without moving items', async () => {
+    const orderedItems = collectionDirective._collection.orderedItems();
+
+    collectionDirective.element.appendChild(document.createElement('span'));
+    await waitForMicrotasks();
+
+    expect(collectionDirective._collection.orderedItems()).toBe(orderedItems);
+  });
 });
 
 @Component({

src/aria/private/utils/collection.ts

@@ -21,11 +21,14 @@ export class SortedCollection<T extends HasElement> {
   private readonly _version = signal(0);
   private _observer?: MutationObserver;
 
-  readonly orderedItems: Signal<T[]> = computed(() => {
-    this._version(); // Track DOM changes
-    const itemsArray = Array.from(this._items());
-    return itemsArray.sort(sortDirectives);
-  });
+  readonly orderedItems: Signal<T[]> = computed(
+    () => {
+      this._version(); // Track DOM changes
+      const itemsArray = Array.from(this._items());
+      return itemsArray.sort(sortDirectives);
+    },
+    {equal: (a, b) => a.length === b.length && a.every((item, i) => item === b[i])},
+  );
 
   register(item: T) {
     this._items.update(set => {