Dart Polymer core-selector multiple selection binding to selected not working

Question

I'm using the core-selector for multiple selection in this way:

    <core-selector id="selector" selected={{selected}} valueattr="label" multi>
        <div class="item" label="foo">foo</div>
        <div class="item" label="bar">bar</div>
        <div class="item" label="zot">zot</div>
    </core-selector>

I'm binding the selected field to a List in order to set and retrieve the selected elements:

@observable
List<String> selected = toObservable([]);

When I print the list with no selection I get an array with one element: an empty array.

selected: [[]] 

When I select an element (bar) I get an array with two elements: an empty array and the selected element.

selected: [[], bar]

If I initialize the selected array with an element (zot) when I print it I get:

selected: [[zot]]

Am I using the core-selector in the wrong way or there is a bug?

The workaround seems to access programmatically the selected property of core-selector element.

Tested with core_elements 0.4.0+6.

Answer 1

Here a workaround:

void ready() {
  $["selector"].selected = selected;
}

Where selected is the list used to keep the selected items and selector the core-selector id.