mat-autocomplete 选项值在 IOS 设备中显示不正确

Question

When I select the first option in the dropdown, the option is not reflected in the field. When I select the second option then first option value appears and when selects third the second option value appears. Any suggestions as to what the problem is in my code?

This is happening only on iOS devices.Its working fine on Android and Desktop.

 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>

Answer 1

I have some auto-complete code that does work on IOS. I compared the two and the difference I see is that I am using (optionSelected) on the mat-autocomplete tag instead of (onSelectionChange) on the mat-option tag. Try it and see.

  <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" (optionSelected)="updateForm($event,emailDomain)">
        <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>