Pre-selection in dom-repeat listbox is not applied in Safari

[kristfal]

Description

Using the following HTML:

<paper-dropdown-menu label="{{localize('select-country')}}">
  <paper-listbox class="dropdown-content" id="listbox" selected="{{selectedCountryIndex}}">
    <template is="dom-repeat" items="[[purchaseGroups]]">
      <paper-item>{{localize(item)}}</paper-item>
    </template>
  </paper-listbox>
</paper-dropdown-menu>

Then executing:

_setDropdownIndex: function() {
  // We get a valid index and apply it to the selected attribute 
  const index = this.purchaseGroups.indexOf(this.storeCountry);
  if (index >= 0) {
    this.set('selectedCountryIndex', index);
  }
}

Expected outcome

The dropdown selects the item according to the index for all browsers.

Actual outcome

Chrome, Firefox and the lot of other evergreens select the dropdown item. Safari does not select item.

However, if the user manually selects an item from the dropdown, then any consecutive call with _setDropdownIndex will work.

Browsers Affected

• [ ] Chrome
• [ ] Firefox
• [X] Safari 9
• [X] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10

[lluisgener]

It seem to fail in Chrome too, but if "localize" is not used, it works:

Fails:

                  <paper-dropdown-menu label="TEST">

                        <paper-listbox class="dropdown-content" selected="true" attr-for-selected="name">

                            <paper-item name="all">{{localize('all')}}</paper-item>

                            <paper-item name="true">{{localize('yes')}}</paper-item>

                            <paper-item name="false">{{localize('no')}}</paper-item>

                        </paper-listbox>

                    </paper-dropdown-menu>

Works:

                    <paper-dropdown-menu label="TEST">

                        <paper-listbox class="dropdown-content" selected="true" attr-for-selected="name">

                            <paper-item name="all">All</paper-item>

                            <paper-item name="true">Yes</paper-item>

                            <paper-item name="false">No</paper-item>

                        </paper-listbox>

                    </paper-dropdown-menu>

[toverboom]

Same issue overhere it states that it is solved but it is not. https://github.com/PolymerElements/app-localize-behavior/issues/81 Is there an outlook when this is going to be solved.