fix(combo-dropdown): keep activeDescendant in a field

Author: ddaribo

projects/igniteui-angular/combo/src/combo/combo-dropdown.component.ts

@@ -17,6 +17,8 @@ export class IgxComboDropDownComponent extends IgxDropDownComponent implements I
     public combo = inject<IgxComboBase>(IGX_COMBO_COMPONENT);
     protected comboAPI = inject(IgxComboAPIService);
 
+    private _activeDescendantId: string | null = null;
+
     /** @hidden @internal */
     @Input({ transform: booleanAttribute })
     public singleMode = false;
@@ -54,6 +56,40 @@ export class IgxComboDropDownComponent extends IgxDropDownComponent implements I
         return null;
     }
 
+    /**
+     * @hidden @internal
+     */
+    public override get focusedItem(): IgxDropDownItemBaseDirective {
+        return super.focusedItem;
+    }
+
+    /**
+     * @hidden @internal
+     * Returns a stable aria-activedescendant id, unaffected by virtual scroll position.
+     * The base class computes this from the live focusedItem getter, which reads from the
+     * children QueryList. During virtual scroll the QueryList is recycled, so the getter
+     * can return null mid-CD-cycle causing NG0100 in zoneless apps. The id is cached instead.
+     */
+    public override get activeDescendant(): string | null {
+        return this._activeDescendantId;
+    }
+
+    /** @hidden @internal */
+    public override set focusedItem(item: IgxDropDownItemBaseDirective) {
+        if (!item) {
+            this._activeDescendantId = null;
+        } else if (item.id !== undefined) {
+            this._activeDescendantId = item.id;
+        } else {
+            // Virtual { value, index } object passed by navigateItem() under virtual scrolling.
+            const resolved = this.children?.find(e => e.index === item.index);
+            if (resolved) {
+                this._activeDescendantId = resolved.id;
+            }
+        }
+        super.focusedItem = item;
+    }
+
     /**
      * Get all non-header items
      *
@@ -141,6 +177,7 @@ export class IgxComboDropDownComponent extends IgxDropDownComponent implements I
             return;
         }
         this.comboAPI.set_selected_item(item.itemID);
+        this._activeDescendantId = item.id;
         this._focusedItem = item;
         this.combo.setActiveDescendant();
     }

projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts

@@ -172,7 +172,7 @@ export abstract class IgxDropDownBaseDirective implements IDropDownList, OnInit
      * This is used to update the `aria-activedescendant` attribute of
      * the IgxDropDownNavigationDirective host element.
      */
-    public get activeDescendant (): string {
+    public get activeDescendant (): string | null {
         return this.focusedItem ? this.focusedItem.id : null;
     }