Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

Angular Aria Combobox and Listbox as hostDirectives mouse click functionality

Aberta
  • Algo errado?
#32,504 4 comentários 1 reação 1 responsável Ver no GitHub

Mantenedores costumam responder em até 1 dia

@ok7sai já está trabalhando nisso.

Desde 1/4/2026.

Avaliação

Esta issue ainda não foi avaliada.

Descrição

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

Linguagem predominante
TypeScript
Estrelas
25k
Forks
6.8k
Merge médio
1d 5h
PRs com merge (30d)
67

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de angular/components

Todas as issues de angular/components

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.