angular/components · error · Error

Attempting to open an undefined instance of `mat-autocomplet

Error message

Attempting to open an undefined instance of `mat-autocomplete`. Make sure that the id passed to the `matAutocomplete` is correct and that you're attempting to open it after the ngAfterContentInit hook.

What it means

MatAutocompleteTrigger._attachOverlay requires the `autocomplete` reference (set via the matAutocomplete input) to be defined when the trigger tries to open the panel. If it is undefined, the trigger has no panel to attach, and in ngDevMode it throws this error explaining both typical causes: a wrong id/input binding, or opening before the referenced mat-autocomplete's content has initialized (ngAfterContentInit). In production it silently returns instead of throwing.

Source

Thrown at src/material/autocomplete/autocomplete-trigger.ts:757

  private _clearPreviousSelectedOption(skip: MatOption | null, emitEvent?: boolean) {
    // Null checks are necessary here, because the autocomplete
    // or its options may not have been assigned yet.
    this.autocomplete?.options?.forEach(option => {
      if (option !== skip && option.selected) {
        option.deselect(emitEvent);
      }
    });
  }

  private _openPanelInternal(valueOnAttach = this._element.nativeElement.value) {
    this._attachOverlay(valueOnAttach);
    this._floatLabel();
  }

  private _attachOverlay(valueOnAttach: string): void {
    if (!this.autocomplete) {
      if (typeof ngDevMode === 'undefined' || ngDevMode) {
        throw getMatAutocompleteMissingPanelError();
      } else {
        // This shouldn't happen only in production mode, but some internal teams have
        // observed it in their production logging. Return since the rest of the function
        // assumes that the autocomplete is defined.
        return;
      }
    }

    let overlayRef = this._overlayRef;

    if (!overlayRef) {
      this._portal = new TemplatePortal(this.autocomplete.template, this._viewContainerRef, {
        id: this._formField?.getLabelId(),
      });
      overlayRef = createOverlayRef(this._injector, this._getOverlayConfig());
      this._overlayRef = overlayRef;
      this._viewportSubscription = this._viewportRuler.change().subscribe(() => {
        if (this.panelOpen && overlayRef) {

View on GitHub (pinned to 0411926e7d)

Solutions

1. Ensure the input binding matches the template ref: <input [matAutocomplete]="auto"> and <mat-autocomplete #auto="matAutocomplete">.
2. Only call openPanel()/focus after AfterContentInit — e.g. inside ngAfterViewInit or later, or queue via setTimeout/queueMicrotask.
3. If the panel is conditionally rendered (@if), also guard the trigger or render both together.
4. Log this.autocomplete in dev to confirm it is undefined before the throw and trace which input/element is wrong.

Example fix

// before
ngOnInit() { this.trigger.openPanel(); } // autocomplete not yet attached
// after
ngAfterViewInit() { setTimeout(() => this.trigger.openPanel()); }

// in component
if (!this.autocompleteTrigger.autocomplete) {
  console.error('matAutocomplete input not bound or panel not initialized yet');
  return;
}
this.autocompleteTrigger.openPanel();

function canOpenPanel(trigger: MatAutocompleteTrigger): boolean {
  return !!trigger.autocomplete;
}

try {
  this.trigger.openPanel();
} catch (e) {
  if (e instanceof Error && e.message.includes('mat-autocomplete')) {
    setTimeout(() => this.trigger.openPanel()); // retry after content init
  } else throw e;
}

When it happens

Trigger: Typing/focusing the input when the matAutocomplete input is empty, misspelled, or points to a nonexistent id; programmatically calling openPanel() in ngOnInit or a constructor before content init; the mat-autocomplete being wrapped in @if/@for that hasn't rendered yet.

Common situations: Copy-pasted template where the matAutocomplete="auto" and #auto="matAutocomplete" ids don't match, opening the panel from a reactive-form subscription that fires during bootstrap, conditional rendering of the autocomplete panel component, structural refactors that removed the referenced panel.

Related errors

• Attempted to open an MatDatepicker with no associated input.
• Unable to retrieve options for autocomplete. Autocomplete pa
• Unable to retrieve option groups for autocomplete. Autocompl
• mat-tab-group background color must be set through the Sass
• A mat-tab-nav-panel must be specified via [tabPanel].

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