Loutocký Loutocký - 7 months ago 180
HTML Question

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?

Answer

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>