We have upgraded angular and angular materials from v15 to v17 and in one of our apps we get an error when trying to use mat autocomplete. The same autocomplete works fine on desktop chrome/firefox. This is the thrown error:
Error: 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.autocomplete.
Here is the html:
<mat-form-field>
<input
#serverInput
type="text"
placeholder="Server url"
matInput
[(ngModel)]="serverUrl"
required
name="serverUrl"
[matAutocomplete]="serverAuto"
/>
<mat-autocomplete #serverAuto="matAutocomplete">
<mat-option *ngFor="let server of servers[serverType]" [value]="server" (click)="loadPositions()">
{{ server }}</mat-option
>
</mat-autocomplete>
</mat-form-field>
The variables it uses:
public serverType: string = 'dev';
public servers: { [key: string]: string[] } = {
prod: [],
dev: ['xy', 'xyz'],
};
public serverUrl: string;
We have tried with the newest ios version 17.4 and with an older 16.x version and both threw the same error.
Also here are the used modules:
FlexLayoutModule,
MatAutocompleteModule,
MatButtonModule,
MatCardModule,
MatDialogModule,
MatDividerModule,
MatFormFieldModule,
MatInputModule,
MatIconModule,
MatButtonToggleModule,
Edit:
I put a button with a click event which takes a property and I gave serverAuto as a property and log out the .template which is an object like this:
Object { _declarationLView: (26) […], _declarationTContainer: {…}, elementRef: {…} }
And in production build this is the error on ios when I tap the input field:
TypeError: undefined is not an object (evaluating 'this.autocomplete.template')