When I click on the first option in the dropdown menu, it does not display the selected option in the field. However, when I select the second option, then the value of the first option appears, and when I choose the third option, the value of the second option is displayed. Can anyone provide any suggestions or insights into what might be causing this issue in my code?
This problem seems to only occur on iOS devices as everything works fine on Android and Desktop.
https://i.sstatic.net/mM6Gt.png
emailDomains = AvailableDomains.emailDomains;
export const AvailableDomains = {
emailDomains: [
"hotmail.com",
"gmail.com",
"yahoo.com",
"outlook.com"
]
}<mat-form-field appearance="outline" class="textbox mat-form-field-invalid">
<span class="iconError icon-alert" aria-hidden="false" aria-label="Error"></span>
<mat-label>Email</mat-label>
<input matInput placeholder="Enter" formControlName="email" type="email" [matAutocomplete]="emailAutoComplete" #email>
<mat-autocomplete #emailAutoComplete="matAutocomplete" panelWidth="auto">
<mat-option *ngFor="let emailDomain of (email.value.endsWith('@') && email.value.split('@').length == 2 ? emailDomains : [])" [value]="email.value + emailDomain">@{{emailDomain}}
</mat-option>
</mat-autocomplete>
</mat-form-field>