compiled dart code not running in IE 10 and IE 11

Issue

I am having trouble with a small dart app which runs perfectly fine in Chrome and Firefox and… guess what…. not in IE 10 and 11 (Project Spartan in Win10 Preview works!).

It is a simple UI controll logic like so:

...
//init elements
SelectElement studyList = querySelector('#studies');
SelectElement roleList = querySelector('#roles');
SelectElement siteList = querySelector('#sites');
ButtonElement createButton = querySelector('#create');

//Kick in the UI logic
_populateStudies();

//UI logic
_populateStudies() {
  for (var study in studies) {
    OptionElement option = new OptionElement();
    option.text = study;
    studyList.children.add(option);
  }
  for (OptionElement element in studyList.children) {
    throw new Exception("ADDING_HANDLER");

//the following is executed, handler seems to get attached

    element.onClick.listen(_studyClickHandler);
  }
}

//Never executed in IE from here on

_studyClickHandler(Event e) {
  siteList.children.clear();
  roleList.children.clear();
  _populateRoles();
}

_populateRoles(){
  List<String> roles = context.getRolesFor(studyList.selectedOptions[0].text);
  for (var role in roles) {
    OptionElement option = new OptionElement();
    option.text = role;
    roleList.children.add(option);
  }
  for (OptionElement element in roleList.children) {
    element.onClick.listen(_roleClickHandler);
  }
}
...

In IE the second selection box stays empty.
Chrome and Firefox handle the code as expected, populating the box’s children according to the element selected in the first selection box.
I have no idea what the problem is… I refactored the handlers to be anonymous functions

onClick.listen((_){
  handle stuff
});

Console shows no errors at all.
Maybe there is an easy solution for it but I am relatively new to dart and can’t figure it out?

Thanks

Solution

I guess the click handler registration is not supported on <option> in the browsers you mention. Alternatively you can register your callback on the SelectElement.onChange and retrieve the selected with something like :

import 'dart:html';
void main() {
  SelectElement select = querySelector('select');
  select.onChange.listen((_) {
    final opt = select.options[select.selectedIndex];
    print(opt.value);
  });
}

You can try it on DartPad with those browsers.

Answered By – Alexandre Ardhuin

Answer Checked By – Mildred Charles (FlutterFixes Admin)