paper-listbox, when setting the selected to an id (int) will not select the input with the same value

Question

I have a Paper-listbox with paper items inside of it.

I set selected equal to the ID of an object, in this case 2. (This is not an index).

It doesnt seem to select the item with that value.

Is there something i am doing wrong with the implementation of list boxes?

here is my sample

<paper-dropdown-menu label="Type" no-animations="true" >
  <paper-listbox id="paperListbox" class="dropdown-content" selected="{{type}}">
    <paper-item value="1">Internal</paper-item>
    <paper-item value="2">External</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

so, {{type}} will set to 2, but it doesnt select the second item. How do i resolve this?

Answer 1

selected is the correct item to use for selection, but do properly override it so it isn't using indices of subitems, you need to leverage the attribute: attrForSelected if you are using polymer, or attr-for-selected for polymer dart.

That way, you can set it to select based on say: the value by saying

attr-for-selected="value"

and then it will use that for selection.

Below is an updated markup.

<paper-dropdown-menu label="Type" no-animations="true" >
  <paper-listbox id="paperListbox" class="dropdown-content" attr-for-selected="value" selected="{{type}}">
    <paper-item value="1">Internal</paper-item>
    <paper-item value="2">External</paper-item>
  </paper-listbox>
</paper-dropdown-menu>