refactor(aria/combobox): clean up afterRenderEffect usage and fix missing id

Author: adolgachev

goldens/aria/combobox/index.api.md

@@ -36,11 +36,12 @@ export class ComboboxDialog {
     // (undocumented)
     close(): void;
     readonly combobox: Combobox<any>;
-    readonly element: HTMLElement;
+    readonly element: HTMLDialogElement;
+    readonly id: _angular_core.InputSignal<string>;
     // (undocumented)
     readonly _pattern: ComboboxDialogPattern;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ComboboxDialog, "dialog[ngComboboxDialog]", ["ngComboboxDialog"], {}, {}, never, never, true, [{ directive: typeof ComboboxPopup; inputs: {}; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ComboboxDialog, "dialog[ngComboboxDialog]", ["ngComboboxDialog"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof ComboboxPopup; inputs: {}; outputs: {}; }]>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxDialog, never>;
 }

src/aria/combobox/BUILD.bazel

@@ -11,6 +11,7 @@ ng_project(
     deps = [
         "//:node_modules/@angular/core",
         "//src/aria/private",
+        "//src/cdk/a11y",
         "//src/cdk/bidi",
     ],
 )

src/aria/combobox/combobox-dialog.ts

@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {afterRenderEffect, Directive, ElementRef, inject} from '@angular/core';
+import {afterRenderEffect, Directive, ElementRef, inject, input} from '@angular/core';
+import {_IdGenerator} from '@angular/cdk/a11y';
 import {ComboboxDialogPattern} from '../private';
 import {Combobox} from './combobox';
 import {ComboboxPopup} from './combobox-popup';
@@ -46,35 +47,34 @@ export class ComboboxDialog {
   private readonly _elementRef = inject(ElementRef<HTMLDialogElement>);
 
   /** A reference to the dialog element. */
-  readonly element = this._elementRef.nativeElement as HTMLElement;
+  readonly element = this._elementRef.nativeElement as HTMLDialogElement;
 
   /** The combobox that the dialog belongs to. */
   readonly combobox = inject(Combobox);
 
+  /** The unique identifier for the trigger. */
+  readonly id = input(inject(_IdGenerator).getId('ng-combobox-dialog-', true));
+
   /** A reference to the parent combobox popup, if one exists. */
   private readonly _popup = inject<ComboboxPopup<unknown>>(ComboboxPopup, {
     optional: true,
   });
 
-  readonly _pattern: ComboboxDialogPattern;
+  readonly _pattern: ComboboxDialogPattern = new ComboboxDialogPattern({
+    id: this.id,
+    element: () => this.element,
+    combobox: this.combobox._pattern,
+  });
 
   constructor() {
-    this._pattern = new ComboboxDialogPattern({
-      id: () => '',
-      element: () => this._elementRef.nativeElement,
-      combobox: this.combobox._pattern,
-    });
-
     if (this._popup) {
       this._popup._controls.set(this._pattern);
     }
 
-    afterRenderEffect(() => {
-      if (this._elementRef) {
-        this.combobox._pattern.expanded()
-          ? this._elementRef.nativeElement.showModal()
-          : this._elementRef.nativeElement.close();
-      }
+    afterRenderEffect({
+      write: () => {
+        this.combobox._pattern.expanded() ? this.element.showModal() : this.element.close();
+      },
     });
   }
 

src/aria/combobox/combobox-input.ts

@@ -81,10 +81,12 @@ export class ComboboxInput {
     }
 
     /** Focuses & selects the first item in the combobox if the user changes the input value. */
-    afterRenderEffect(() => {
-      this.value();
-      controls?.items();
-      untracked(() => this.combobox._pattern.onFilter());
+    afterRenderEffect({
+      write: () => {
+        this.value();
+        controls?.items();
+        untracked(() => this.combobox._pattern.onFilter());
+      },
     });
   }
 }