Reset autocomplete input after selection, then show all options - autocomplete

Question

I have an autocomplete input, the problem is whenever I reset the input value it doesn't reset selection options. It only shows the latest selection.
Here's the GIF to illustrate the problem: https://recordit.co/aVXqlPYHFQ
I tried with this.form.get('panelForm').setValue(''); it reset the input but doesn't reset the options
Here's my code
<form *ngIf="options.length">
<mat-form-field [formGroup]="form">
<input type="text" [placeholder]="'Panel'" aria-label="Panel" matInput [formControl]="myControl" [formControlName]="'panelForm'" [matAutocomplete]="auto">
<button mat-button mat-icon-button matSuffix (click)="clear()" *ngIf="form.get('panelForm')">
<mat-icon>close</mat-icon>
</button>
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)='selectPanel($event.option.value)'>
<mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
{{option.name}} ({{option.genesCount}})
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
myControl = new FormControl();
filteredOptions: Observable<Panel[]>;
public form: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges.pipe(
startWith(''),
map(value => { return this._filter(value)})
);
this.form = this.fb.group({
panelForm: new FormControl({ value: '', disabled: this.options.length < 1})
});
}
private _filter(value: string): Panel[] {
const filterValue = value.toLowerCase();
return this.options.filter(option => option.name && option.name.toLowerCase().includes(filterValue));
}
clear(){
this.form.get('panelForm').setValue('');
}

Answer 1

You don't need to use Form control if you are using Form control name (inside a FormGroup).
I recommend using the FormControl and set:
ngOnInit() {
this.myControl = new FormControl({'', disabled: this.options.length < 1});
this.filteredOptions = this.myControl.valueChanges.pipe(
startWith(''),
map(value => { return this._filter(value)})
);
}
clear() {
this.myControl.patchValue('');
}
Should work

Answer 2

Try to reset the value directly in html:
<form *ngIf="options.length">
<mat-form-field [formGroup]="form">
<input #myInput type="text" [placeholder]="'Panel'" aria-label="Panel" matInput [formControl]="myControl" [formControlName]="'panelForm'" [matAutocomplete]="auto"> // <-- set name here 'myInput'
<button mat-button mat-icon-button matSuffix (click)="clear()" *ngIf="form.get('panelForm')">
<mat-icon>close</mat-icon>
</button>
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="selectPanel($event.option.value);myInput.value=''"> // <-- reset value here
<mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
{{option.name}} ({{option.genesCount}})
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>