angular/components · error

Select does not have options matching the specified filter

Error message

Select does not have options matching the specified filter

What it means

NativeSelectHarness.selectOptions(filter) fetches matching options via getOptions(filter); when none match, it throws 'Select does not have options matching the specified filter' instead of silently selecting nothing. It is a test-harness assertion that the filter matched.

Source

Thrown at src/material/input/testing/native-select-harness.ts:94

    return (await this.host()).isFocused();
  }

  /** Gets the options inside the select panel. */
  async getOptions(filter: NativeOptionHarnessFilters = {}): Promise<MatNativeOptionHarness[]> {
    return this.locatorForAll(MatNativeOptionHarness.with(filter))();
  }

  /**
   * Selects the options that match the passed-in filter. If the select is in multi-selection
   * mode all options will be clicked, otherwise the harness will pick the first matching option.
   */
  async selectOptions(filter: NativeOptionHarnessFilters = {}): Promise<void> {
    const [isMultiple, options] = await parallel(() => {
      return [this.isMultiple(), this.getOptions(filter)];
    });

    if (options.length === 0) {
      throw Error('Select does not have options matching the specified filter');
    }

    const [host, optionIndexes] = await parallel(() => [
      this.host(),
      parallel(() => options.slice(0, isMultiple ? undefined : 1).map(option => option.getIndex())),
    ]);

    await host.selectOptions(...optionIndexes);
  }
}

View on GitHub (pinned to 0411926e7d)

Solutions

1. Use HarnessLoader/waitForOptions-style awaiting: ensure options are rendered before selecting (flush async with await fixture.whenStable() or fakeAsync tick).
2. Print available options first with getOptions() and match the exact text/index.
3. Correct the filter object ({text: ...} or {index: ...}) to match rendered option content.
4. Verify the select actually has options at the time of the call (guard with a length check before selectOptions).

Example fix

// before
await select.selectOptions({text: 'Option A'});
// after
const options = await select.getOptions();
if (options.length === 0) { throw new Error('select not populated yet'); }
await select.selectOptions({text: (await options[0].host()).textContent as string});

const options = await select.getOptions(filter);
if (options.length === 0) {
  throw new Error('No options matched filter; is the select populated yet?');
}
await select.selectOptions(filter);

try {
  await select.selectOptions({text: 'Option A'});
} catch (e) {
  if ((e as Error).message.includes('does not have options matching')) {
    await fixture.whenStable(); // flush async option loading
    await select.selectOptions({text: 'Option A'});
  } else { throw e; }
}

When it happens

Trigger: Calling harness.selectOptions({text: 'X'}) or selectOptions({index: n}) on a native select whose options do not contain that text/index, or selecting on an empty select.

Common situations: Options loaded asynchronously (via HTTP) after the harness query runs without waiting; filter text mismatching due to whitespace/label casing; index out of range; testing a select rendered conditionally.

Related errors

• No selected tab could be found.
• No active link could be found.
• Unable to retrieve options for timepicker. Timepicker panel
• Could not find a mat-option matching ${JSON.stringify(filter
• Cannot find chip matching filter ${JSON.stringify(filter)}

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