refactor(aria/listbox): use write stage for afterRenderEffect, effect for validation messages

Author: adolgachev

src/aria/listbox/listbox.ts

@@ -12,6 +12,7 @@ import {
   computed,
   contentChildren,
   Directive,
+  effect,
   ElementRef,
   inject,
   input,
@@ -158,7 +159,7 @@ export class Listbox<V> {
       this._popup._controls.set(this._pattern as ComboboxListboxPattern<V>);
     }
 
-    afterRenderEffect(() => {
+    effect(() => {
       if (typeof ngDevMode === 'undefined' || ngDevMode) {
         const violations = this._pattern.validate();
         for (const violation of violations) {
@@ -167,27 +168,31 @@ export class Listbox<V> {
       }
     });
 
-    afterRenderEffect({write: () => this._pattern.setDefaultState()});
+    afterRenderEffect({write: () => this._pattern.setDefaultStateEffect()});
 
     // Ensure that if the active item is removed from
     // the list, the listbox updates it's focus state.
-    afterRenderEffect(() => {
-      const items = inputs.items();
-      const activeItem = untracked(() => inputs.activeItem());
+    afterRenderEffect({
+      write: () => {
+        const items = inputs.items();
+        const activeItem = untracked(() => inputs.activeItem());
 
-      if (!items.some(i => i === activeItem) && activeItem) {
-        this._pattern.listBehavior.unfocus();
-      }
+        if (!items.some(i => i === activeItem) && activeItem) {
+          this._pattern.listBehavior.unfocus();
+        }
+      },
     });
 
     // Ensure that the value is always in sync with the available options.
-    afterRenderEffect(() => {
-      const items = inputs.items();
-      const value = untracked(() => this.value());
+    afterRenderEffect({
+      write: () => {
+        const items = inputs.items();
+        const value = untracked(() => this.value());
 
-      if (items && value.some(v => !items.some(i => i.value() === v))) {
-        this.value.set(value.filter(v => items.some(i => i.value() === v)));
-      }
+        if (items && value.some(v => !items.some(i => i.value() === v))) {
+          this.value.set(value.filter(v => items.some(i => i.value() === v)));
+        }
+      },
     });
   }