{"record":{"id":"76062bd80316fa55","repo":"angular/components","slug":"attempting-to-open-an-undefined-instance-of-mat-a","errorCode":null,"errorMessage":"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.","messagePattern":"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\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/material/autocomplete/autocomplete-trigger.ts","lineNumber":757,"sourceCode":"  private _clearPreviousSelectedOption(skip: MatOption | null, emitEvent?: boolean) {\n    // Null checks are necessary here, because the autocomplete\n    // or its options may not have been assigned yet.\n    this.autocomplete?.options?.forEach(option => {\n      if (option !== skip && option.selected) {\n        option.deselect(emitEvent);\n      }\n    });\n  }\n\n  private _openPanelInternal(valueOnAttach = this._element.nativeElement.value) {\n    this._attachOverlay(valueOnAttach);\n    this._floatLabel();\n  }\n\n  private _attachOverlay(valueOnAttach: string): void {\n    if (!this.autocomplete) {\n      if (typeof ngDevMode === 'undefined' || ngDevMode) {\n        throw getMatAutocompleteMissingPanelError();\n      } else {\n        // This shouldn't happen only in production mode, but some internal teams have\n        // observed it in their production logging. Return since the rest of the function\n        // assumes that the autocomplete is defined.\n        return;\n      }\n    }\n\n    let overlayRef = this._overlayRef;\n\n    if (!overlayRef) {\n      this._portal = new TemplatePortal(this.autocomplete.template, this._viewContainerRef, {\n        id: this._formField?.getLabelId(),\n      });\n      overlayRef = createOverlayRef(this._injector, this._getOverlayConfig());\n      this._overlayRef = overlayRef;\n      this._viewportSubscription = this._viewportRuler.change().subscribe(() => {\n        if (this.panelOpen && overlayRef) {","sourceCodeStart":739,"sourceCodeEnd":775,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/autocomplete/autocomplete-trigger.ts#L739-L775","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Ensure the input binding matches the template ref: <input [matAutocomplete]=\"auto\"> and <mat-autocomplete #auto=\"matAutocomplete\">.","Only call openPanel()/focus after AfterContentInit — e.g. inside ngAfterViewInit or later, or queue via setTimeout/queueMicrotask.","If the panel is conditionally rendered (@if), also guard the trigger or render both together.","Log this.autocomplete in dev to confirm it is undefined before the throw and trace which input/element is wrong."],"exampleFix":"// before\nngOnInit() { this.trigger.openPanel(); } // autocomplete not yet attached\n// after\nngAfterViewInit() { setTimeout(() => this.trigger.openPanel()); }","handlingStrategy":"type-guard","validationCode":"// in component\nif (!this.autocompleteTrigger.autocomplete) {\n  console.error('matAutocomplete input not bound or panel not initialized yet');\n  return;\n}\nthis.autocompleteTrigger.openPanel();","typeGuard":"function canOpenPanel(trigger: MatAutocompleteTrigger): boolean {\n  return !!trigger.autocomplete;\n}","tryCatchPattern":"try {\n  this.trigger.openPanel();\n} catch (e) {\n  if (e instanceof Error && e.message.includes('mat-autocomplete')) {\n    setTimeout(() => this.trigger.openPanel()); // retry after content init\n  } else throw e;\n}","preventionTips":["Match [matAutocomplete]=\"x\" with #x=\"matAutocomplete\" exactly","Open the panel only after AfterViewInit/AfterContentInit, or via setTimeout","Avoid conditionally rendering mat-autocomplete without also guarding the trigger","Add a dev-time assertion/log for trigger.autocomplete before programmatic opens"],"tags":["angular-material","autocomplete","lifecycle","template-binding"],"backgroundTag":"mat-autocomplete-missing-panel","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-09-01T08:17:40.651Z"}