In my code, I have a dropdown where a user can select an element. The user also can type in it and the dropdown will filter the elements and bring the element the user wants. The code works and dropdown does the filtering. But whenever the page first opens, inside the dropdown, `undefined` is written when it's supposed to be clear. Even though there is stuff in the dropdown. Here is my code. How can I fix that?
[![enter image description here](https://i.stack.imgur.com/eJPSk.jpg)](https://i.stack.imgur.com/eJPSk.jpg)

HTML:

```
                        <mat-form-field appearance="outline" fxFlex fxFlex.gt-sm="25" class="pr-4">
                            <mat-label>Ürün</mat-label>
                            <input type="text" required matInput [(ngModel)]="product" name="product"
                            (input)="onProductSearchChange($event.target.value)" [matAutocomplete]="autoProductId">
                        <mat-autocomplete autoActiveFirstOption #autoProductId="matAutocomplete"
                            [displayWith]="displayProduct.bind(this)">
                            <mat-option *ngFor="let prm of productList" [value]="prm">
                                {{prm?.StockIntegrationCode +'  '+ prm?.ProductName}}
                            </mat-option>
                        </mat-autocomplete>
                        </mat-form-field> 

```

TS:

```
productList: IProduct[];
  product: IProduct = {};
  constructor(
    private _stockService: StockService,
  ) { 

    _stockService.onProductsChanged.subscribe(
      (response: IProduct[]) => {
          this.productList = response;
      }
  );
  }
onProductSearchChange(search: string) {
  let filterValue = (search as any).toLocaleLowerCase("tr");
  if (
      this._stockService.products &&
      this._stockService.products.length > 0
  ) {
      this.productList = this._stockService.products.filter(
          (x) =>
              x.StockIntegrationCode.indexOf(filterValue) >= 0 ||
              (x.ProductName as any)
                  .toLocaleLowerCase("tr")
                  .indexOf(filterValue) >= 0
      );
  }
  if (!search) {
      this.product = null;
      this.productList = this._stockService.products;
  }
}

displayProduct(product: IProduct): string | undefined {
  return product
      ? product.StockIntegrationCode + " - " + product.ProductName
      : "";
}

```