Предложение автозаполнения Google неуместно в angular

Question

Я использую автозаполнение Google в angular mat-dialog.

Я добавил поле поиска внутри mat-диалогового окна.

Когда я что-то ищу, предложение автоматически появляется сверху или над строкой поиска

Есть идеи о том, как я могу решить это или направить меня.? Обратите внимание, что это диалоговое окно. Где я сделал неправильно? Ниже приведены мои коды

app. html

<div *ngIf="!passAddressCheck">
    <p class="montserratSemiBold fontSize22px">Seach of an address</p>
    <div class="marginBottom30px marginTop30px">
      <div class="container">
        <div class="form-group">
          <input autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control" #search [formControl]="searchControl">
        </div>
      </div>
    </div>
    <p *ngIf="showErrorAddress" class="errorColor fontSize14px montserratRegular marginBottom30px">Sorry we do not deliver to you address at this moment</p>
  </div>

app.component.ts

searchControl: FormControl;

this.searchControl = new FormControl();


@ViewChild('search', {static: false})
public searchElementRef: ElementRef;
this.mapsAPILoader.load().then(() => {
      const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
        componentRestrictions: {country: 'my'}
      });

      autocomplete.addListener('place_changed', () => {
        this.ngZone.run(() => {

          const place: google.maps.places.PlaceResult = autocomplete.getPlace();

          if (place.geometry === undefined || place.geometry === null) {
            return;
          }

          this.latitude = place.geometry.location.lat();
          this.longitude = place.geometry.location.lng();
          this.zoom = 12;

        });
      });
    });
  }