Adding children to SelectElement in Dart


I am creating a (very large) select element that needs to be added in several places on a single page. Instead of recreating it for every instance I am making a single prototype and then doing a deep clone on it for each instance and adding some new properties to the new instance.

Everything works as expected in Dart but fails when I compile it to JavaScript.

Below is the minimum steps to reproduce the problem:

<!DOCTYPE html>

    <script type="application/dart">
        import "dart:html";

          List<String> languages = ["Japan", "Ireland", "Spain"];
          SelectElement langSelect = new SelectElement();
          for (int i = 0; i < languages.length; i++) {
            OptionElement option = new OptionElement();
            option.text = languages[i];    

            print("Before Assigning child");
            print("After Assignment");
    <script src="packages/browser/dart.js"></script>
    <p id="text">Test</p>

The expected output is for “Before Assigning child” and “After Assignment” to be printed three times. This is the case when run in Dart. After compiling to JavaScript I get “Before Assigning child” printed and then I get the following error when run in Dartium:

Uncaught Error: Assertion failed shadow_dom.debug.js:1437
    assert shadow_dom.debug.js:1437
    assertIsNodeWrapper shadow_dom.debug.js:2592
    mixin.appendChild shadow_dom.debug.js:2780
    VG.h html_dart2js.dart:7928
    E2 test.html.0.dart:17
    Iq test.html_bootstrap.dart:11
    aX.vV isolate_helper.dart:248
    Rq isolate_helper.dart:66
    (anonymous function) test.html_bootstrap.dart.js:4350
    init.currentScript test.html_bootstrap.dart.js:4330
    (anonymous function) test.html_bootstrap.dart.js:4344
    (anonymous function)

Dart Editor: version 0.8.7_r29341
Dart SDK: version


I got this working by updating the Dart editor to version 0.8.10_r30036, Dart SDK to version and running pub update.

Answered By – Spaceindaver

Answer Checked By – Robin (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *