Dropdown not working as expected in Safari?

Question

I have a dropdown in an Angular 2 project:

<div class="form-group">
   <label for="vendors">Vendors</label>
   <select class="form-control" id="vendor_id" name="vendor_id" [(ngModel)]="selectedVendor"  (ngModelChange)="onVendorChange($event)" required>
      <option *ngFor=" let vendor of vendors " [ngValue]="vendor"> {{vendor.business_name}} </option>
   </select>
</div>

This works fine in Chrome, but when I open it in Safari, when the page is loaded it shows the first item as selected even if I didn't selected anything. However, if I click "Submit" it will show "This field is mandatory".

In Safari it shows the first item as selected, but actually it's not selected. How to fix this?

I have exactly this issue with Angular 4, again, only in Safari. Did you ever find a resolution? — simon, Oct 10 '17 at 22:15
i kept a default option(like place holder, with value=undefined) — hilda_sonica_vish, Oct 12 '17 at 05:01
@simon did you find a solution for not using a default option? — crooksey, Oct 23 '17 at 10:33
@crooksey -- no mate, not as yet; haven't had chance to have a proper look yet. Your solution below looks like a solid bet, though, if nothing better can be done. Upvoted. — simon, Oct 24 '17 at 05:20
@simon thanks, this is an inherit problem to safari, nothing to do with angular. — crooksey, Oct 24 '17 at 07:37

score 5 · Answer 1 · answered May 18 '18 at 19:43

5

In fact, you may find that the accepted answer is insufficient. At least using Angular 5 and Safari, I have found that you must explicitly make the option undefined. In other words:

 <option disabled selected value=undefined> --Select-- </option>

Otherwise, the option will simply be marked as disabled and Safari will continue to show that it has the first real option selected, when in fact it isn't (and can't be).

answered May 18 '18 at 19:43

David Hoelzer

15,862
4
48
67

3

In my case, I had to use `` because my select was connected to a model that was initialized with `null` values. – simon Sep 12 '18 at 00:27

crooksey · Accepted Answer · 2017-10-24T07:38:46.117

This is not an angular issue, this is the default behavior on safari/mobile safari. An easy solution/workaround is shown below.

If you add another option box such as:

<option disabled selected value> --Select-- </option>

Then your code becomes:

<div class="form-group">
    <label for="vendors">Vendors</label>
    <select class="form-control" id="vendor_id" name="vendor_id" [(ngModel)]="selectedVendor"  (ngModelChange)="onVendorChange($event)" required>
        <option disabled selected value> --Select-- </option>
        <option *ngFor=" let vendor of vendors " [ngValue]="vendor"> {{vendor.business_name}} </option>
    </select>
</div>

This way you cannot re-select the first "Select" box after the user has made a valid selection, answer taken from this answer.

Dropdown not working as expected in Safari?

2 Answers2