Dropdown component not having effect in Chromium browser

Question

I have a simple pie chart with a dropdown component (based on <select>) which is used to toggle chart's data (I'm using angular 6). It works in firefox, but when I test it out on chromium nothing happens (as if the user did not select anything on the dropdown menu at all). Why does this happen? Full working example is on the stackblitz here.

For example, in the SelectComponent there is the onClick method that emits the selected values (value from the <option> element):

onClick(value: string): void {
  console.log(`I'm emitting ${value}`);
  this.select.emit(value);
}

and in the template:

<select>
  <option
    *ngFor="let item of items"
    value="{{item.value}}"
    (click)="onClick(item.value)"
  >{{ item.label }}</option>
</select>

I've added console.log for debugging, and it's normally printed out to console on the firefox, but on the Chromium it's not printed to the console at all, as if the onClick method was never called.

I've also tried onClick($event) instead of onClick(item.value), but nothing happened.

Did anyone encountered similar problem, is this some chartjs bug, or am I missing something?

Answer 1

Try using (change) event on select element instead of (click) on option

<select (change)="onChange($event)">
  ...

You can access the current value from

$event.target.value

The reason behind using the change event instead of a click event on option is that chrome does not trigger such a event on select options - so it's not related to angular.