mat-autocomplete dropdown shows up on top left of the window [Angular]

Question

Right now I'm working on an Angular project and in this project there's a page with 2 mat-autocomplete components, one for selecting country and the other for selecting state. The state one works fine with everything staying at expected places, as shown here:

And inspecting elements shows properties that make sense. For div with class name cdk-overlay-pane (highlighted in pic) the width is 350px and top as well as left will change dynamically to make it always display right above or under the associated input element.

And here's the related HTML code:

<div class="p-10" fxFlex.gt-md="100" fxFlex.gt-xs="100" fxFlex="100" [hidden]="!showStateDropdown">
  <div class="spec-form-field drop-down" matAutocompleteOrigin #stateOrigin="matAutocompleteOrigin">
    <mat-form-field>
      <input type="text" #stateInput [formControl]="form.controls['state']" placeholder="{{ 'account_section.state' | translate }}" matInput [matAutocomplete]="state" (keyup)="isSelectedState = false; _filterSearch('state');" (blur)="removeUnusableValue();" (focus)="_filterSearch('state');"
      [matAutocompleteConnectedTo]="stateOrigin">
      <i class="material-icons">arrow_drop_down</i>
    </mat-form-field>
    <mat-autocomplete #state="matAutocomplete" (optionSelected)="isSelectedState = true;" (blur)="updateAccountData()">
      <mat-option *ngFor="let state of states" [value]="state.iso">
        {{ state.name }}
      </mat-option>
    </mat-autocomplete>
  </div>
</div>

However, things get weird when it comes to the mat-autocomplete for country. The dropdown for this one will always appear on the top left corner of the window (browser).

And when I'm inspecting elements, width, top and left properties of cdk-overlay-pane are always set to 0px.

However, I'm unable to find actual differences between the one for country and the one for state, except that everything that says "state" is replaced with "country" in the one for country. Here's the HTML code:

<div class="p-10" fxFlex.gt-md="100" fxFlex.gt-xs="100" fxFlex="100">
  <div class="spec-form-field drop-down" matAutocompleteOrigin #countryOrigin="matAutocompleteOrigin">
    <mat-form-field>
      <input type="text" #countryInput [formControl]="form.controls['country']" placeholder="{{ 'account_section.country' | translate }}"  matInput [matAutocomplete]="country" (keyup)="checkKeycode($event.keyCode,'country');" (blur)="removeUnusableValue();" (focus)="_filterSearch('country');"
      [matAutocompleteConnectedTo]="countryOrigin">
      <i class="material-icons">arrow_drop_down</i>
    </mat-form-field>
    <mat-autocomplete #country="matAutocomplete" (optionSelected)="changeCountry()" (blur)="updateAccountData()">
      <mat-option *ngFor="let country of countries" [value]="country.iso">
        {{ country.name }}
      </mat-option>
    </mat-autocomplete>
  </div>
</div>

I honestly have no idea why the country one is not working properly. Everything seems fine but the end result is not.

Here's version numbers of components and modules being used in this project in case anyone wants to take a look.

Any help is appreciated.

Answer 1

Right after completing the post I just double checked the HTML file and found a different component with the same #countryInput at the bottom of the HTML file. Looks like whoever modified that file forgot to differentiate it from the original one. I'll just leave this question as a reference.