when I focus on the Input field then dropdown first value gets highlight. When I press the tab button then highlighted the value set in the input field. when I click outside the Input field then highlighted value should not set in the input field But it is getting set How to fix this?
Code:
<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();
}
}