Method constructor

src/aria/listbox/listbox.ts:139–199

()

  readonly activeDescendant: Signal<string | undefined>;

  constructor() {
    // Map directives to their patterns for the ListboxPattern
    const orderedItemPatterns = computed(() =>
      this._collection.orderedItems().map(option => option._pattern),
    );

    const inputs = {
      ...this,
      id: this.id,
      items: orderedItemPatterns,
      activeItem: signal(undefined),
      textDirection: this.textDirection,
      element: () => this._elementRef.nativeElement,
    };

    this._pattern = new ListboxPattern<V>(inputs);

    this.activeDescendant = computed(() => this._pattern.activeDescendant());

    afterNextRender(() => {
      this._collection.startObserving(this.element);
    });

    // Check for any violations after the DOM has been updated.
    if (typeof ngDevMode === 'undefined' || ngDevMode) {
      afterRenderEffect({
        read: () => {
          reportViolations(this._pattern.validate(), this.element);
        },
      });
    }

    afterRenderEffect({write: () => this._pattern.setDefaultStateEffect()});

    // Ensure that if the active item is removed from
    // the list, the listbox updates it's focus state.
    afterRenderEffect({
      write: () => {
        const items = inputs.items();
        const activeItem = untracked(() => inputs.activeItem());

        if (activeItem && !items.some(i => i === activeItem)) {
          this._pattern.listBehavior.unfocus();
          this._pattern.setDefaultState();
        }
      },
    });

    // Ensure that the value is always in sync with the available options.
    // This needs to be after the render for the value to always be available.
    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)));
        }