Angular's mat-select is not closing when clicking outside

I am using angular material's select component to load some options to choose from. When I click on the field, the list of options appear as expected, however, when I click anywhere outside the options, the select does not close. I have noticed that this issue is only persistent on mobile phones, even when inspecting on chrome and changing the dimensions to that of a phone the problem still persists.

component.ts:

<mat-form-field>
<mat-label>City</mat-label>
<mat-select formControlName="cityId" (valueChange)="onCityChange($event)">
<mat-option *ngFor="let city of cities" [value]="city.id">
{{city.name}}
</mat-option>
</mat-select>
<mat-error *ngIf="form.get('cityId').hasError('required')">
This field is required
</mat-error>
</mat-form-field>

Continue reading...