angular/components · error · Error

Unable to retrieve options for autocomplete. Autocomplete pa

Error message

Unable to retrieve options for autocomplete. Autocomplete panel is closed.

What it means

MatAutocompleteHarness.getOptions() locates MatOptionHarness instances inside the autocomplete panel, which only exists in the DOM while the autocomplete is open. If isOpen() reports false, the harness throws rather than returning an empty list, to signal the panel is not attached.

Source

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

  /** Whether the autocomplete input is focused. */
  async isFocused(): Promise<boolean> {
    return (await this.host()).isFocused();
  }

  /** Enters text into the autocomplete. */
  async enterText(value: string): Promise<void> {
    return (await this.host()).sendKeys(value);
  }

  /** Clears the input value. */
  async clear(): Promise<void> {
    return (await this.host()).clear();
  }

  /** Gets the options inside the autocomplete panel. */
  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.',
      );

View on GitHub (pinned to 0411926e7d)

Solutions

Open the panel first: focus/interact with the input trigger (e.g. await (await harness.host()).sendKeys or setValue) and wait until isOpen() is true
Add a wait/flush of pending tasks (fakeAsync tick, waitFor) after triggering the input before querying options
If the panel closed after selecting an option, re-trigger it before a subsequent getOptions call

Example fix

// before
const options = await harness.getOptions(); // throws: panel closed
// after
await harness.focus();
await harness.enterText('a');
await harness.isOpen(); // ensure true
const options = await harness.getOptions();

Defensive patterns

Strategy: validation

Validate before calling

if (await harness.isOpen()) {
  const options = await harness.getOptions();
}

Try / catch

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

Prevention

Always open the autocomplete (focus/type into the trigger) before querying options
Await async rendering (tick/waitFor) after simulating input
Remember option selection closes the panel; re-open before further queries

When it happens

Trigger: Calling getOptions() (directly or via harness.getOptions(...)) before opening the autocomplete (no focus/input into the trigger), or after it closed (blur, escape, option selection).

Common situations: Tests that read options without first focusing the input or dispatching input events; async timing where the panel hasn't opened yet; assertions after an option was already selected which auto-closes the panel.

Related errors

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