Angular Dropdown Doesn't Work, Looks Like a List - html

Question

In my code, I defined a mat-chip-list so that a user can select multiple items from a list of elements. The code doesn't have any errors, but the mat-chip-list doesn't appear as a dropdown. I should be able to select elements from it, but I can't do that either. It just looks like a list as it shown below. What should I do to fix this?
HTML:
<div fxLayout="row" fxLayoutAlign="start center">
<mat-form-field appearance="outline" class="w-100-p" fxFlex>
<mat-label>Product</mat-label>
<mat-chip-list #chipList>
<mat-chip *ngFor="let prm of receiptList"
[selectable]="selectable"
[removable]="removable"
(removed)="removeReceipt(prm)">
{{prm.StockIntegrationCode +' - '+ prm.StockShortName}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input #receiptInput
[formControl]="receiptCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="addReceipt($event)">
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="receiptSelected($event)">
<mat-option *ngFor="let receipt of filteredReceipts| async" [value]="receipt">
{{receipt.StockIntegrationCode +' - '+ receipt.StockShortName}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
TS:
receiptList: IReceipt[] = [];
receipt: IReceipt[];
allReceipts: IReceipt[] = [];
selectable = true;
removable = true;
addOnBlur = true;
readonly separatorKeysCodes: number[] = [ENTER, COMMA];
receiptCtrl = new FormControl();
filteredReceipts: Observable<IReceipt[]>;
#ViewChild('receiptInput', { read: MatAutocompleteTrigger, static: false }) trigger: MatAutocompleteTrigger;
#ViewChild('receiptInput', { static: false }) receiptInput: ElementRef<HTMLInputElement>;
#ViewChild('auto', { static: false }) matAutocomplete: MatAutocomplete;
constructor(
private _labService: LabService,
) {
_labService.onReceiptListChanged.subscribe(
(response: IReceipt[]) => {
this.receiptList = response;
}
);
this.filteredReceipts = this.receiptCtrl.valueChanges.pipe(
startWith(null),
map((prm: IReceipt | null) =>
prm ? this._filterSupplier(prm) : this.allReceipts.slice()
)
);
}
addReceipt(event: MatChipInputEvent): void {
if (!this.matAutocomplete.isOpen) {
let input = event.input;
let value: IReceipt = event.value as IReceipt;
// Add our approver
if (value) {
this.receipt.push(value);
}
// Reset the input value
if (input) {
input.value = '';
}
this.receiptCtrl.setValue(null);
}
}
removeReceipt(receipt: IReceipt): void {
const index = this.receiptList.indexOf(receipt);
if (index >= 0) {
this.receiptList.splice(index, 1);
}
}
private _filterSupplier(value: IReceipt): IReceipt[] {
let filterValue = value;
if (isString(filterValue)) {
let filterValue = (value as any).toLocaleLowerCase('tr');
return this.allReceipts.filter((prm: IReceipt) => {
return (prm.StockShortName as any).toLocaleLowerCase('tr').indexOf(filterValue) >= 0
});
}
else {
return this.allReceipts.filter((prm: IReceipt) => {
return prm.StockIntegrationCode === prm.StockIntegrationCode;
});
}
}
receiptSelected(event: MatAutocompleteSelectedEvent): void {
let sUser: IReceipt = event.option.value;
if (this.receiptList.filter((f: IReceipt) => f.StockIntegrationCode == sUser.StockIntegrationCode).length == 0) {
this.receiptList.push(sUser);
}
this.receiptInput.nativeElement.value = '';
this.receiptCtrl.setValue(null);
}