fix(multiple): expose element (#32328)

* fix(multiple): expose element

* fixup! fix(multiple): expose element

Author: wagnermaciel

src/aria/accordion/accordion.ts

@@ -147,15 +147,15 @@ export class AccordionTrigger {
   /** A reference to the trigger element. */
   private readonly _elementRef = inject(ElementRef);
 
+  /** A reference to the trigger element. */
+  readonly element = this._elementRef.nativeElement as HTMLElement;
+
   /** The parent AccordionGroup. */
   private readonly _accordionGroup = inject(AccordionGroup);
 
   /** A unique identifier for the widget. */
   readonly id = input(inject(_IdGenerator).getId('ng-accordion-trigger-', true));
 
-  /** The host native element. */
-  readonly element = computed(() => this._elementRef.nativeElement);
-
   /** A local unique identifier for the trigger, used to match with its panel's `panelId`. */
   readonly panelId = input.required<string>();
 
@@ -176,6 +176,7 @@ export class AccordionTrigger {
     ...this,
     accordionGroup: computed(() => this._accordionGroup._pattern),
     accordionPanel: this._accordionPanel,
+    element: () => this.element,
   });
 
   /** Expands this item. */
@@ -242,6 +243,9 @@ export class AccordionGroup {
   /** A reference to the group element. */
   private readonly _elementRef = inject(ElementRef);
 
+  /** A reference to the group element. */
+  readonly element = this._elementRef.nativeElement as HTMLElement;
+
   /** The AccordionTriggers nested inside this group. */
   private readonly _triggers = contentChildren(AccordionTrigger, {descendants: true});
 
@@ -251,9 +255,6 @@ export class AccordionGroup {
   /** The AccordionPanels nested inside this group. */
   private readonly _panels = contentChildren(AccordionPanel, {descendants: true});
 
-  /** The host native element. */
-  readonly element = computed(() => this._elementRef.nativeElement);
-
   /** The text direction (ltr or rtl). */
   readonly textDirection = inject(Directionality).valueSignal;
 
@@ -280,6 +281,7 @@ export class AccordionGroup {
     // TODO(ok7sai): Investigate whether an accordion should support horizontal mode.
     orientation: () => 'vertical',
     getItem: e => this._getItem(e),
+    element: () => this.element,
   });
 
   constructor() {

src/aria/combobox/combobox.ts

@@ -91,6 +91,9 @@ export class Combobox<V> {
   /** The element that the combobox is attached to. */
   private readonly _elementRef = inject(ElementRef);
 
+  /** A reference to the combobox element. */
+  readonly element = this._elementRef.nativeElement as HTMLElement;
+
   /** The DeferredContentAware host directive. */
   private readonly _deferredContentAware = inject(DeferredContentAware, {optional: true});
 
@@ -213,6 +216,9 @@ export class ComboboxInput {
   /** The element that the combobox is attached to. */
   private readonly _elementRef = inject<ElementRef<HTMLInputElement>>(ElementRef);
 
+  /** A reference to the input element. */
+  readonly element = this._elementRef.nativeElement as HTMLElement;
+
   /** The combobox that the input belongs to. */
   readonly combobox = inject(Combobox);
 
@@ -330,7 +336,10 @@ export class ComboboxPopup<V> {
 })
 export class ComboboxDialog {
   /** The dialog element. */
-  readonly element = inject(ElementRef<HTMLDialogElement>);
+  private readonly _elementRef = inject(ElementRef<HTMLDialogElement>);
+
+  /** A reference to the dialog element. */
+  readonly element = this._elementRef.nativeElement as HTMLElement;
 
   /** The combobox that the dialog belongs to. */
   readonly combobox = inject(Combobox);
@@ -345,7 +354,7 @@ export class ComboboxDialog {
   constructor() {
     this._pattern = new ComboboxDialogPattern({
       id: () => '',
-      element: () => this.element.nativeElement,
+      element: () => this._elementRef.nativeElement,
       combobox: this.combobox._pattern,
     });
 
@@ -354,10 +363,10 @@ export class ComboboxDialog {
     }
 
     afterRenderEffect(() => {
-      if (this.element) {
+      if (this._elementRef) {
         this.combobox._pattern.expanded()
-          ? this.element.nativeElement.showModal()
-          : this.element.nativeElement.close();
+          ? this._elementRef.nativeElement.showModal()
+          : this._elementRef.nativeElement.close();
       }
     });
   }

src/aria/grid/grid.ts

@@ -65,6 +65,9 @@ export class Grid {
   /** A reference to the host element. */
   private readonly _elementRef = inject(ElementRef);
 
+  /** A reference to the host element. */
+  readonly element = this._elementRef.nativeElement as HTMLElement;
+
   /** The rows that make up the grid. */
   private readonly _rows = contentChildren(GridRow, {descendants: true});
 
@@ -76,9 +79,6 @@ export class Grid {
   /** Text direction. */
   readonly textDirection = inject(Directionality).valueSignal;
 
-  /** The host native element. */
-  readonly element = computed(() => this._elementRef.nativeElement);
-
   /** Whether selection is enabled for the grid. */
   readonly enableSelection = input(false, {transform: booleanAttribute});
 
@@ -132,6 +132,7 @@ export class Grid {
     ...this,
     rows: this._rowPatterns,
     getCell: e => this._getCell(e),
+    element: () => this.element,
   });
 
   constructor() {
@@ -186,6 +187,9 @@ export class GridRow {
   /** A reference to the host element. */
   private readonly _elementRef = inject(ElementRef);
 
+  /** A reference to the host element. */
+  readonly element = this._elementRef.nativeElement as HTMLElement;
+
   /** The cells that make up this row. */
   private readonly _cells = contentChildren(GridCell, {descendants: true});
 
@@ -200,9 +204,6 @@ export class GridRow {
   /** The parent grid UI pattern. */
   readonly grid = computed(() => this._grid._pattern);
 
-  /** The host native element. */
-  readonly element = computed(() => this._elementRef.nativeElement);
-
   /** The index of this row within the grid. */
   readonly rowIndex = input<number>();
 
@@ -250,6 +251,9 @@ export class GridCell {
   /** A reference to the host element. */
   private readonly _elementRef = inject(ElementRef);
 
+  /** A reference to the host element. */
+  readonly element = this._elementRef.nativeElement as HTMLElement;
+
   /** The widgets contained within this cell, if any. */
   private readonly _widgets = contentChildren(GridCellWidget, {descendants: true});
 
@@ -267,9 +271,6 @@ export class GridCell {
   /** A unique identifier for the cell. */
   readonly id = input(inject(_IdGenerator).getId('ng-grid-cell-', true));
 
-  /** The host native element. */
-  readonly element = computed(() => this._elementRef.nativeElement);
-
   /** The ARIA role for the cell. */
   readonly role = input<'gridcell' | 'columnheader' | 'rowheader'>('gridcell');
 
@@ -318,6 +319,7 @@ export class GridCell {
     row: () => this._row._pattern,
     widgets: this._widgetPatterns,
     getWidget: e => this._getWidget(e),
+    element: () => this.element,
   });
 
   constructor() {}
@@ -369,12 +371,12 @@ export class GridCellWidget {
   /** A reference to the host element. */
   private readonly _elementRef = inject(ElementRef);
 
+  /** A reference to the host element. */
+  readonly element = this._elementRef.nativeElement as HTMLElement;
+
   /** The parent cell. */
   private readonly _cell = inject(GridCell);
 
-  /** The host native element. */
-  readonly element = computed(() => this._elementRef.nativeElement);
-
   /** A unique identifier for the widget. */
   readonly id = input(inject(_IdGenerator).getId('ng-grid-cell-widget-', true));
 
@@ -407,6 +409,7 @@ export class GridCellWidget {
   /** The UI pattern for the grid cell widget. */
   readonly _pattern = new GridCellWidgetPattern({
     ...this,
+    element: () => this.element,
     cell: () => this._cell._pattern,
     focusTarget: computed(() => {
       if (this.focusTarget() instanceof ElementRef) {

src/aria/listbox/listbox.ts

@@ -71,9 +71,12 @@ export class Listbox<V> {
     optional: true,
   });
 
-  /** A reference to the listbox element. */
+  /** A reference to the host element. */
   private readonly _elementRef = inject(ElementRef);
 
+  /** A reference to the host element. */
+  readonly element = this._elementRef.nativeElement as HTMLElement;
+
   /** The directionality (LTR / RTL) context for the application (or a subtree of it). */
   private readonly _directionality = inject(Directionality);
 
@@ -233,9 +236,12 @@ export class Listbox<V> {
   },
 })
 export class Option<V> {
-  /** A reference to the option element. */
+  /** A reference to the host element. */
   private readonly _elementRef = inject(ElementRef);
 
+  /** A reference to the host element. */
+  readonly element = this._elementRef.nativeElement as HTMLElement;
+
   /** The parent Listbox. */
   private readonly _listbox = inject(Listbox);
 
@@ -245,14 +251,11 @@ export class Option<V> {
   // TODO(wagnermaciel): See if we want to change how we handle this since textContent is not
   // reactive. See https://github.com/angular/components/pull/30495#discussion_r1961260216.
   /** The text used by the typeahead search. */
-  protected searchTerm = computed(() => this.label() ?? this.element().textContent);
+  protected searchTerm = computed(() => this.label() ?? this.element.textContent);
 
   /** The parent Listbox UIPattern. */
   protected listbox = computed(() => this._listbox._pattern);
 
-  /** A reference to the option element to be focused on navigation. */
-  protected element = computed(() => this._elementRef.nativeElement);
-
   /** The value of the option. */
   value = input.required<V>();
 
@@ -271,7 +274,7 @@ export class Option<V> {
     id: this.id,
     value: this.value,
     listbox: this.listbox,
-    element: this.element,
+    element: () => this.element,
     searchTerm: this.searchTerm,
   });
 }

src/aria/menu/menu.ts

@@ -69,15 +69,15 @@ import {Directionality} from '@angular/cdk/bidi';
   },
 })
 export class MenuTrigger<V> {
-  /** A reference to the menu trigger element. */
+  /** A reference to the host element. */
   private readonly _elementRef = inject(ElementRef);
 
+  /** A reference to the host element. */
+  readonly element = this._elementRef.nativeElement as HTMLElement;
+
   /** The directionality (LTR / RTL) context for the application (or a subtree of it). */
   readonly textDirection = inject(Directionality).valueSignal;
 
-  /** A reference to the menu element. */
-  readonly element: HTMLButtonElement = this._elementRef.nativeElement;
-
   /** The menu associated with the trigger. */
   menu = input<Menu<V> | undefined>(undefined);
 
@@ -175,11 +175,11 @@ export class Menu<V> {
     this._allItems().filter(i => i.parent === this),
   );
 
-  /** A reference to the menu element. */
+  /** A reference to the host element. */
   private readonly _elementRef = inject(ElementRef);
 
-  /** A reference to the menu element. */
-  readonly element: HTMLElement = this._elementRef.nativeElement;
+  /** A reference to the host element. */
+  readonly element = this._elementRef.nativeElement as HTMLElement;
 
   /** The directionality (LTR / RTL) context for the application (or a subtree of it). */
   readonly textDirection = inject(Directionality).valueSignal;
@@ -320,11 +320,11 @@ export class MenuBar<V> {
   readonly _items: SignalLike<MenuItem<V>[]> = () =>
     this._allItems().filter(i => i.parent === this);
 
-  /** A reference to the menu element. */
+  /** A reference to the host element. */
   private readonly _elementRef = inject(ElementRef);
 
-  /** A reference to the menubar element. */
-  readonly element: HTMLElement = this._elementRef.nativeElement;
+  /** A reference to the host element. */
+  readonly element = this._elementRef.nativeElement as HTMLElement;
 
   /** Whether the menubar is disabled. */
   readonly disabled = input(false, {transform: booleanAttribute});
@@ -412,11 +412,11 @@ export class MenuBar<V> {
   },
 })
 export class MenuItem<V> {
-  /** A reference to the menu item element. */
+  /** A reference to the host element. */
   private readonly _elementRef = inject(ElementRef);
 
-  /** A reference to the menu element. */
-  readonly element: HTMLElement = this._elementRef.nativeElement;
+  /** A reference to the host element. */
+  readonly element = this._elementRef.nativeElement as HTMLElement;
 
   /** The unique ID of the menu item. */
   readonly id = input(inject(_IdGenerator).getId('ng-menu-item-', true));