0

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?

Gitnik
  • 564
  • 7
  • 26

1 Answers1

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.

Sebastian Krysiak
  • 910
  • 6
  • 14
  • I've made a change you suggested, and it seems to work: https://stackblitz.com/edit/working-version However, I'm not sure exactly why? Also, should I changed the `@Output() select` to some other name to avoid clashing with default browsers implementation of `(select)`? – Gitnik Aug 07 '18 at 14:43
  • As i've mentioned in my answer , chrome does not trigger 'click' event on option elements. Some browser's do, some don't so it's not the way to handle this kind of problems if you're aiming for cross-browser support. You can read about this here http://webbugtrack.blogspot.com/2007/11/bug-280-lack-of-events-for-options.html . Its old entry but still seem's to be the issue – Sebastian Krysiak Aug 08 '18 at 08:52