Angular Aria Combobox and Listbox as hostDirectives mouse click functionality

[jasonbryan]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

No

Description

When using hostDirectives to implement a Combobox, mouse click will only open the combobox and not close it. Also the Listbox within will not register mouse clicks on Option components. Below is nearly the same example from the Docs, but using hostDirectives.

TS

import {
    Combobox,
    ComboboxInput,
    ComboboxPopup,
    ComboboxPopupContainer,
} from "@angular/aria/combobox";
import { Listbox, Option } from "@angular/aria/listbox";
import {
    afterRenderEffect,
    ChangeDetectionStrategy,
    Component,
    computed,
    viewChild,
    viewChildren,
} from "@angular/core";
import { OverlayModule } from "@angular/cdk/overlay";

@Component({
    selector: "mww-select",
    templateUrl: "./mww-select.html",
    styleUrl: "./mww-select.css",
    host: { ngCombobox: "", readonly: "" },
    hostDirectives: [{ directive: Combobox, inputs: ["readonly"] }],
    imports: [
        ComboboxInput,
        ComboboxPopup,
        ComboboxPopupContainer,
        Listbox,
        Option,
        OverlayModule,
    ],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MwwSelect {
    /** The combobox listbox popup. */
    listbox = viewChild<Listbox<string>>(Listbox);
    /** The options available in the listbox. */
    options = viewChildren<Option<string>>(Option);
    /** A reference to the ng aria combobox. */
    combobox = viewChild<Combobox<string>>(Combobox);
    /** The string that is displayed in the combobox. */
    displayValue = computed(() => {
        const values = this.listbox()?.values() || [];
        if (values.length === 0) {
            return "Select a label";
        }
        if (values.length === 1) {
            return values[0];
        }
        return `${values[0]} + ${values.length - 1} more`;
    });
    /** The labels that are available for selection. */
    labels = [
        "Important",
        "Starred",
        "Work",
        "Personal",
        "To Do",
        "Later",
        "Read",
        "Travel",
    ];
    constructor() {
        // Scrolls to the active item when the active option changes.
        // The slight delay here is to ensure animations are done before scrolling.
        afterRenderEffect(() => {
            const option = this.options().find((opt) => opt.active());
            setTimeout(
                () => option?.element.scrollIntoView({ block: "nearest" }),
                50,
            );
        });
        // Resets the listbox scroll position when the combobox is closed.
        afterRenderEffect(() => {
            if (!this.combobox()?.expanded()) {
                setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
            }
        });
    }
}

Component HTML

<div #origin class="select">
    <span class="combobox-label">
        <span class="selected-label-text">{{ displayValue() }}</span>
    </span>
    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
    <span class="example-arrow material-symbols-outlined" translate="no">arrow_drop_down</span>
</div>
<ng-template ngComboboxPopupContainer>
    <ng-template [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
        [cdkConnectedOverlayOpen]="true">
        <div class="example-popup-container">
            <div ngListbox multi>
                @for (label of labels; track label) {
                <div ngOption [value]="label" [label]="label">
                    <span class="example-option-text">{{label}}</span>
                    <span class="example-option-check material-symbols-outlined" translate="no">check</span>
                </div>
                }
            </div>
        </div>
    </ng-template>
</ng-template>

Usage HTML

<mww-select></mww-select>

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

Angular CLI       : 21.0.0
Angular           : 21.0.0
Node.js           : 22.18.0
Package Manager   : npm 10.8.1
Operating System  : win32 x64

┌───────────────────────────────────┬───────────────────┬───────────────────┐
│ Package                           │ Installed Version │ Requested Version │
├───────────────────────────────────┼───────────────────┼───────────────────┤
│ @angular-devkit/build-angular     │ 21.0.0            │ ^21.0.0           │
│ @angular/animations               │ 21.0.0            │ ^21.0.0           │
│ @angular/aria                     │ 21.0.0            │ ^21.0.0           │
│ @angular/cdk                      │ 21.0.0            │ ^21.0.0           │
│ @angular/cli                      │ 21.0.0            │ ^21.0.0           │
│ @angular/common                   │ 21.0.0            │ ^21.0.0           │
│ @angular/compiler                 │ 21.0.0            │ ^21.0.0           │
│ @angular/compiler-cli             │ 21.0.0            │ ^21.0.0           │
│ @angular/core                     │ 21.0.0            │ ^21.0.0           │
│ @angular/forms                    │ 21.0.0            │ ^21.0.0           │
│ @angular/material                 │ 21.0.0            │ ^21.0.0           │
│ @angular/platform-browser         │ 21.0.0            │ ^21.0.0           │
│ @angular/platform-browser-dynamic │ 21.0.0            │ ^21.0.0           │
│ @angular/router                   │ 21.0.0            │ ^21.0.0           │
│ rxjs                              │ 7.8.2             │ ^7.5.5            │
│ typescript                        │ 5.9.3             │ ^5.9.3            │
│ zone.js                           │ 0.15.1            │ ^0.15.1           │
└───────────────────────────────────┴───────────────────┴───────────────────┘

Anything else?

No response