Not working with a paper-dropdown-menu >> timing issue ?!

[Mika83AC]

Hello everyone,

I just encountered that the app-localize-behavior is not working together well with a paper-dropdown-menu.

Example:

<paper-dropdown-menu>
   <paper-listbox class="dropdown-content" selected="0">
      <paper-item>{{localize('ByTitle')}}</paper-item>
      <paper-item>{{localize('ByRelease')}}</paper-item>
      <paper-item>{{localize('ByRating')}}</paper-item>
      <paper-item>{{localize('ByRuntime')}}</paper-item>
   </paper-listbox>
</paper-dropdown-menu>

The paper-dropdown-menu itself is working, but no text is visible although the first element is selected. When opening the listbox, all translated entries appear.

So i guess this is a timing issue and the translations are rendered "too late" to appear as selected text in the dropdown-menu, right?

Is there any way arround this issue without "breaking" the default way polymers works?

Regards,
Michael

[ThomasCybulski]

Hi @Mika83AC
have you found a workaround or solution?

[Mika83AC]

Hey @ThomasCybulski,

yes, I solved it, but currently I'm not aware any more how. :)

Maybe it will help you to check my project where I use it. Repo: https://github.com/Mika83AC/MMC Working version: https://mmc.divelop.de

In component "mmc-list.html" I'm using the paper-dropdowns and they localize correctly. Language can be switched in menu "Einstellungen" (sites defaults so German as language).

Regards,
Michael

[toverboom]

Same issue mentioned in the issue below. It is still not solved. And the workaround does not seem to solve the actual issue.
PolymerElements/paper-dropdown-menu#212

[felixzapata]

@notwaldorf any updates about this issue?

[KinasOrlon]

Found a workaround, not very proud of it, but works nonetheless:

<paper-dropdown-menu label="[[ localize('my_label') ]]">
  <paper-listbox slot="dropdown-content" attr-for-selected="value" selected="{{ someValue }}">
    <template is="dom-repeat" items="{{ _getItems(localize) }}" as="item">
      <paper-item value="[[ item.id ]]">[[ item.label ]]</paper-item>
    </template>
  </paper-listbox>
</paper-dropdown-menu>

_getItems: localize => [{
  id: 'item1',
  label: localize('item1')
}, {
  id: 'item2',
  label: localize('item2')
}]