Angular Material mat-menu loses input focus when filtering scrollable content

I'm using Angular Material's mat-menu to create a dropdown with a search input and a scrollable list of items (cars). Everything works fine when the list is small. But when the list height exceeds 350px (making the menu scrollable), typing in the search input causes the input field to lose focus — especially when filtering the list dynamically via FormControl.valueChanges.

Issue: When I start typing in the input, the menu remains open, but the input loses focus, and I can't continue typing. This only happens when the content inside the menu is scrollable (height > 350px). If the list is small (no scrollbar), there is no focus issue.

TypeScript

searchControl = new FormControl('');
filteredCars: string[] = [];

this.searchControl.valueChanges.subscribe((searchText: string) => {
this.filteredCars = this.Cars.filter(car =>
car.toLowerCase().includes(searchText.toLowerCase())
);
});



HTML

<div class="item2" *ngIf="groupedEpisodeEventsArray.length > 0">
<div class="filter-section" [matMenuTriggerFor]="carMenu">
<i class='bx bxs-car'></i>
<span>car</span>
<span *ngIf="requestFormGroup.get('cars')?.value.length">
({{ requestFormGroup.get('cars')?.value.length }})
</span>
</div>

<mat-menu #carMenu="matMenu" class="matMenu">
<div class="menu-list" (click)="$event.stopPropagation()">
<div class="field search-box-2">
<input type="text" [formControl]="searchControl" placeholder=" " />
<label>Search car...</label>
</div>
<ng-container *ngFor="let car of filteredCars">
<div mat-menu-item>
<label>
<input type="checkbox" [value]="car" (change)="onCheckboxChange($event)"
[checked]="iscarChecked(car)" /> {{ car }}
</label>
</div>
</ng-container>
</div>
</mat-menu>
</div>


CSS

.menu-list {
max-height: 350px;
overflow-y: auto;
}

Continue reading...