Having issues with option selection when using @if

I'm trying to implement an autocomplete search in Angular 17 using the new control flow syntax and Material's mat-autocomplete. I want to only show options when there's a search value, but I'm running into issues with the option selection functionality breaking when I add this condition.

What I tried:

<form>
<mat-form-field class="search-field">
<mat-label>Add Product</mat-label>
<input
type="text"
matInput
[formControl]="search"
id="search"
[matAutocomplete]="auto"
(blur)="resetProducts()" />
<mat-autocomplete
#auto="matAutocomplete"
(optionSelected)="onSelect($event)">
@if (products$ | async; as products) {
<!-- Line immediately below breaks it -->
@if (search.value?.length > 0) {
@for (product of products; track product.productCode) {
<mat-option [value]="product">
{{ product.productCode }} - {{ product.brand }} {{ product.name }}
</mat-option>
}
}
}
</mat-autocomplete>
</mat-form-field>
</form>


The above unfortunately breaks the optionSelected from triggering onSelect...

Continue reading...