I have an Angular dropdown reading and setting values from a SQL Server via Typescript intermediary class. Its current behavior is to alter the Typescript the moment the user clicks in the dropdown, closing the dropdown and reloading the dynamic page. Users find this annoying, and would prefer to be able to click freely within the dropdown menu without altering the bound typescript value, ONLY changing it when they click out of the menu, closing it. Is there a known way to accomplish this?

<mat-form-field>
            <mat-label>Year</mat-label>
            <mat-select formControlName="year" (selectionChange)="isStandardOrCurrentCost()">
                <mat-option *ngFor="let year of getAvailableYears()" [value]="year">{{year}}</mat-option>
            </mat-select>
            <control-messages [control]="form.get('year')"></control-messages>
</mat-form-field>