CODEWITHSUNDEEP
htmltwitter-bootstrapangular
Loutocký
Loutocký

Reputation: 832

Angular 2 (click) does not work in Chrome

I am using in my html template something like this:

 <div class="input-group" id="geo-type">
        <div class="input-label" [style.color]="geographicLocationColor">{{geoLocationTitle}}</div>
        <select class="dropdown-toggle dropdown-select" role="button" aria-haspopup="true" aria-expanded="false">
            <option value="" selected hidden>{{geographicLocationPl}}</option>
            <option *ngFor="#geo of geographicLocations" (click)="locationOnSelect(geo)">{{geo.description}}</option>
        </select>
    </div>

If I select something in dropdown menu with firefox, the method locationOnSelect is called (I am doing some other GET identified by location), but in Chrome nothing will happen - the method locationOnSelect is not called.

Also I have problem with IE (ver 11), locationOnSelect is okay, but on the next GET (user select something in second dropdown menu) the IE crashes - stop working. So my app is 100% working in firefox only. Any ideas?

Upvotes: 0

Views: 2761

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657288

You need to add the (click)="..." or (change)="..." on the <select> instead of the <option>

See also Click event on select option element in chrome

<div class="input-group" id="geo-type">
    <div class="input-label" [style.color]="geographicLocationColor">{{geoLocationTitle}}</div>
    <select [ngModel]="selectedGeo" (ngModelChange)="locationOnSelect($event)"
       class="dropdown-toggle dropdown-select" role="button" aria-haspopup="true" aria-expanded="false">
        <option selected hidden>{{geographicLocationPl}}</option>
        <option *ngFor="#geo of geographicLocations" [ngValue]="geo">{{geo.description}}</option>
    </select>
</div>

Upvotes: 1

Related Questions