Polymer 2 iron-selector selected element doesn't update after the dom changes order of elements

I have a component, which has 4 instances.

User clicks number 2, product B gets selected.

When the dom is re-ordered, later after he selects another option, these 4 instances of the component card-brick are re-ordered (because price changes, so this happens automatically in the flow) all good... except for the fact that the selected element, which was number 2 , moved to position 1.

and... the 2nd element continues to be selected instead of product B!

The ui shows selected product D.

it seems that somehow polymer 2 is ignoring this selected attribute when repainting the DOM. how can I avoid this?

<iron-selector id="something-semantic" attr-for-selected="value" selected={{value}}>
    <template is="dom-repeat" items="[[filteredProductosCategorias]]" as="productoCategoria" id="productoTipo">
        <div class="card-brick" value="[[productCategoria.id]]" tabindex="1" on-keyup="_seleccionaCategoria">
        </div>
    </template>
</iron-selector>

the selection is stick to previously selected element in the DOM order. how can I make this selected value to also update don dom changes??

any suggestion to overcome this problem?? users can be confused.

The problem is that dom-repeat doesn't rebuild the elements inside, because that would be a heavy operation. It just assigns new values to child elements, meaning that iron-selector has no clue that the content has changed. In the example, you selected the second element, and after the re-sort, it's still the second element selected.

I'm confused in what _selectCategory does, because if it sets the category, then you probably don't even need iron-selector. I never used that element myself (and would never use it, because it's simple to write it myself). Anyway, if you re-sort using _selectCategory, then just set the new value property with this.set().