angular/components · error · Error

Unable to retrieve option groups for autocomplete. Autocompl

Error message

Unable to retrieve option groups for autocomplete. Autocomplete panel is closed.

What it means

MatAutocompleteHarness.getOptionGroups() locates MatOptgroupHarness instances inside the autocomplete panel, which only exists while the panel is open. The harness throws this error when isOpen() is false instead of returning an empty array.

Source

Thrown at src/material/autocomplete/testing/autocomplete-harness.ts:104

  async getOptions(filters?: Omit<OptionHarnessFilters, 'ancestor'>): Promise<MatOptionHarness[]> {
    if (!(await this.isOpen())) {
      throw new Error('Unable to retrieve options for autocomplete. Autocomplete panel is closed.');
    }

    return this._documentRootLocator.locatorForAll(
      MatOptionHarness.with({
        ...(filters || {}),
        ancestor: await this._getPanelSelector(),
      } as OptionHarnessFilters),
    )();
  }

  /** Gets the option groups inside the autocomplete panel. */
  async getOptionGroups(
    filters?: Omit<OptgroupHarnessFilters, 'ancestor'>,
  ): Promise<MatOptgroupHarness[]> {
    if (!(await this.isOpen())) {
      throw new Error(
        'Unable to retrieve option groups for autocomplete. Autocomplete panel is closed.',
      );
    }

    return this._documentRootLocator.locatorForAll(
      MatOptgroupHarness.with({
        ...(filters || {}),
        ancestor: await this._getPanelSelector(),
      } as OptgroupHarnessFilters),
    )();
  }

  /** Selects the first option matching the given filters. */
  async selectOption(filters: OptionHarnessFilters): Promise<void> {
    await this.focus(); // Focus the input to make sure the autocomplete panel is shown.
    const options = await this.getOptions(filters);
    if (!options.length) {
      throw Error(`Could not find a mat-option matching ${JSON.stringify(filters)}`);

View on GitHub (pinned to 0411926e7d)

Solutions

Open the autocomplete first (focus the input / type to trigger filtering) and verify isOpen() is true before calling getOptionGroups()
Await the panel rendering (tick/waitFor) after simulating input
Re-open the panel if a previous action (e.g. selecting an option) closed it

Example fix

// before
const groups = await harness.getOptionGroups(); // throws: panel closed
// after
await harness.focus();
await harness.enterText('q');
const groups = await harness.getOptionGroups();

Defensive patterns

Strategy: validation

Validate before calling

if (await harness.isOpen()) {
  const groups = await harness.getOptionGroups();
}

Try / catch

try {
  groups = await harness.getOptionGroups();
} catch (e) {
  if ((e as Error).message.includes('panel is closed')) {
    await harness.focus();
    groups = await harness.getOptionGroups();
  } else { throw e; }
}

Prevention

Open the panel and confirm isOpen() before querying groups
Handle the panel closing after each option selection in test flows
Use fakeAsync/tick or waitFor to ensure the panel has rendered

When it happens

Trigger: Calling getOptionGroups() while the autocomplete panel is closed — i.e. the trigger was never focused, or the panel closed due to blur/Escape/option selection before the call.

Common situations: Testing grouped options without opening the panel first; forgetting that selecting an option closes the panel before further group queries; race conditions where the panel hasn't rendered yet.

Related errors

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/007649a2a4033204. Report an issue: GitHub.