Mat Auto Complete Floating Problem
//in HTML
<input
#autoCompleteInput //it is the selector used in component
type="text"
class="form-control"
matInput
[matAutocomplete]="auto"
formControlName="country"
(input)="filterCountries($event.target.value)"
/>
//in component
@ViewChild('autoCompleteInput', { read: MatAutocompleteTrigger, static: false })
autoComplete: MatAutocompleteTrigger;
ngOnInit(): void {
window.addEventListener('scroll', this.scrollEvent, true);
}
scrollEvent = (event: any): void => {
if(this.autoComplete.panelOpen)
// this.autoComplete.closePanel(); //you can also close the panel
this.autoComplete.updatePosition();
};
Mushy Mamba