Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Angular Aria Combobox and Listbox as hostDirectives mouse click functionality

Đang mở
  • Có gì không ổn?
#32,504 4 bình luận 1 reaction 1 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@ok7sai đang làm issue này rồi.

Từ ngày 1/4/2026.

Đánh giá

Issue này chưa được đánh giá.

Mô tả

area: aria/combobox area: aria/listbox P3
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>
Image
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

Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
2 ngày 18 giờ
Pull request đã merge (30 ngày)
81

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của angular/components

Tất cả issue của angular/components

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.