Polymer: observing property change for an array with data binding

Question

In my-custom-element, I am trying to compute a property (computedProperty) based on a second property (selected). This second property is binded to the property (selected-values) of a child element (iron-selector). Since the property observed is of type Array I am expecting the selected.* syntax to work. It does not.

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-selector/iron-selector.html">

<dom-module id="my-custom-element">

  <style>
    :host ::content .iron-selected {
      background-color: orange;
    }
  </style>
  <template>
    <div>logged:<span id='logged'></span></div>
    <div>computed:<span id='computed'>{{computedProperty}}</span></div>
    <iron-selector multi selected-values="{{selected}}" attr-for-selected="uid">
        <div class="select-option" uid="foo">foo</div>
        <div class="select-option" uid="bar">bar</div>
        <div class="select-option" uid="baz">baz</div>
    </iron-selector>
    <button on-tap="log">Log</button>
  </template>

  <script>
    Polymer({
      is: 'my-custom-element',
      properties: {
        selected: {
          type: Array,
          default: function () { return []; }
        },
        computedProperty: {
          type: String,
          computed: 'compute(selected.*)'
        }
      },
      compute: function(selected) {
        return this.selected.join();
      },
      log: function() {
        return this.$.logged.textContent = this.selected.join();
      }
    });
  </script>
</dom-module>

As I can check with the log button, the value of the selected property is properly propagated to through the binding though.

What I am doing wrong?

Answer 1

I've created a fix that resolves the binding issue:

https://github.com/Trakkasure/iron-selector/tree/fix-multiselect

I've made a pull request to get this fix in.