Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

bug(aria/combobox): ComboboxPopup throws NG0950 when destroyed before its first change detection

Chiusa Adatta ai principianti
  • Qualcosa non va?
#33,972 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
78/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
angular, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Inizia in src/aria/combobox/combobox-popup.ts, in particolare in ngOnDestroy, e controlla la registrazione del ciclo di vita e il comportamento di teardown del componente. Riproduci il problema con il test fornito, che crea una fixture e la distrugge senza eseguire il rilevamento delle modifiche. L’obiettivo è raggiunto quando il teardown non legge più un input obbligatorio non impostato e il test passa.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

area: aria/combobox gemini-triaged
Is this a regression?
  • Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was

No response

Description

ComboboxPopup.ngOnDestroy calls this.combobox()._unregisterPopup(). The combobox input is input.required(). If the view that holds the popup is destroyed before its first update pass, the input was never set, and reading it throws NG0950: Input "combobox" is required but no value is available yet. Angular reports this as "Error during cleanup of component", and in tests it fails the test ("1 fixture threw errors during cleanup").

This happens in any unit test that creates a component containing a combobox and does not run change detection before teardown, for example a plain "should create" test, or a test that only checks providers.

Reproduction
import { Component } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { Combobox, ComboboxPopup, ComboboxWidget } from '@angular/aria/combobox';
import { Listbox, Option } from '@angular/aria/listbox';

@Component({
  imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option],
  template: `
    <div ngCombobox #combobox="ngCombobox" tabindex="0">Pick one</div>
    <ng-template ngComboboxPopup [combobox]="combobox">
      <div ngListbox ngComboboxWidget #listbox="ngListbox" focusMode="activedescendant"
        [activeDescendant]="listbox.activeDescendant()">
        <div ngOption value="alpha" label="alpha">alpha</div>
      </div>
    </ng-template>
  `,
})
class Repro {}

it('destroys cleanly before the first change detection', () => {
  const fixture = TestBed.createComponent(Repro);
  expect(() => fixture.destroy()).not.toThrow();   // throws NG0950
});
Expected Behavior

Destroying the popup without a first change detection does nothing (there is nothing to unregister).

Actual Behavior

NG0950: Input "combobox" is required but no value is available yet, from ComboboxPopup.ngOnDestroy (src/aria/combobox/combobox-popup.ts, line 67 on main).

A possible fix: register in ngOnInit and keep the registered combobox in a field, then unregister that field (if set) in ngOnDestroy, instead of reading the input again.

Workaround: wrap the ng-template ngComboboxPopup in @if (combobox) { … }, so the popup is only created in an update pass.

Environment
  • Angular: 22.2.1
  • CDK/Material: @angular/cdk 22.2.3, @angular/aria 22.2.3 (also in 22.3.0-next.2 and main)
  • Browser(s): any (seen in Vitest with happy-dom)
  • Operating System (e.g. Windows, macOS, Ubuntu): macOS
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 7h
PR unite (30g)
69

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di angular/components

Tutte le issue di angular/components

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.