cuando me enfoco en el campo de entrada, el primer valor desplegable se resalta. Cuando presiono el botón de tabulación, resalto el valor establecido en el campo de entrada. cuando hago clic fuera del campo de entrada, el valor resaltado no debe establecerse en el campo de entrada, pero se está configurando ¿Cómo solucionar esto?

Código:

 <input mat-tab-directive [style.color]="isValueModified()" (focus)="focusFunction()" type="text" [formControl]="myControl" [matAutocomplete]="auto" (onMatTabSelectionChange)="onMatTabSelectionChange($event)" (blur)="inputBlur($event)"> <mat-autocomplete #auto="matAutocomplete" [autoActiveFirstOption]="true"> <mat-option *ngFor="let item of filteredOptions | async; [value]="item.value"> {{item.description}} </mat-option> </mat-autocomplete> myControl: FormControl = new FormControl(); filteredOptions: Observable<any[]>; focusFunction() { this.filteredOptions = this.myControl.valueChanges .pipe( startWith(''), map(value => this.filter(value)) ); } onMatTabSelectionChange(event) { var val = event.value; if (event.active) { this.myControl.setValue(val); } } inputBlur(event) { } import { Directive, AfterViewInit, OnDestroy, Optional, Output, EventEmitter, NgZone } from '@angular/core'; import { MatAutocompleteTrigger } from '@angular/material/autocomplete'; @Directive({ selector: '[mat-tab-directive]' }) export class MatTabDirective implements AfterViewInit, OnDestroy { observable: any; constructor(@Optional() private autoTrigger: MatAutocompleteTrigger, private zone: NgZone) { } @Output() onMatTabSelectionChange = new EventEmitter<any>(true); ngAfterViewInit() { this.zone.runOutsideAngular(() => { this.observable = this.autoTrigger.panelClosingActions.subscribe(x => { if (this.autoTrigger.activeOption) { this.autoTrigger.writeValue(this.autoTrigger.activeOption.value) this.onMatTabSelectionChange.emit(this.autoTrigger.activeOption); } }) }); } ngOnDestroy() { this.observable.unsubscribe(); } }