Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Angular Aria Combobox and Listbox as hostDirectives mouse click functionality

Abierto
  • ¿Algo no está bien?
#32,504 4 comentarios 1 reacción 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@ok7sai ya está trabajando en esto.

Desde el 1/4/2026.

Evaluación

Este issue todavía no se ha evaluado.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 7 h
PR fusionados (30 d)
69

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de angular/components

Todos los issues de angular/components

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.