How to preselect a paper-item in a paper-dropdown-menu from model data?

Question

I have an iron-form to do CRUD in my project. This works well, apart of one problem.

How can I get the paper-dropdown-menu to show the value from the model data ? (That is: preselect paper-item corresponding to the [[o.id]] value from my model data)

The selected attribute of paper-menu does not help because it's index-based and not based on the value of a paper-item.

Here is the code of the form:

<form is="iron-form" id="itemForm" method="post" action="/api/item/edit">

    <input is="iron-input" name="id" type="hidden" value="{{item.id}}">

    <paper-dropdown-menu label="Title" selected-item="{{selectedTitle}}">
        <paper-menu class="dropdown-content">
            <template is="dom-repeat" items="{{titles}}" as="o">
                <paper-item value="[[o.id]]">[[o.name]]</paper-item>
            </template>
        </paper-menu>
    </paper-dropdown-menu>
    <input is="iron-input" name="title" type="hidden" value$="[[selectedTitle.value]]">

    <paper-input name="firstName" label="First name" value="{{item.firstName}}"></paper-input>

    <paper-button raised onclick="document.getElementById('itemForm').submit()">Save</paper-button>
</form>

Answer 1

First, you cannot use selected-item for two-way data binding 'cause it's read-only.

Instead, you should be using selected on the paper-menu like this -

<paper-menu id="menu" class="dropdown-content" selected="{{selectedValue}}" attr-for-selected="value">

Note that you need to specify the attr-for-selected to tell the selected property which attribute to use for selection. You also need to create a selectedValue property in your element to update the selected property via binding.

Initially, I specified the selectedValue property in Polymer's ready function and it didn't work. I suspect this might be because the selected property was set too early, before the repeating templates were rendered.

So instead of setting it inside ready, I set it in attached -

attached: function () {
  this.async(function () {
    this.selectedValue = 1;
  });
}

And this time it works.

Answer 2

To pre-select items in the paper-dropdown-menu you can add the properties selected and attr-for-selected in the element used as dropdown-content (e.g. paper-menu or paper-listbox).

<paper-dropdown-menu>
  <paper-listbox attr-for-selected="data-order" selected="1" class="dropdown-content">
    <paper-item data-order="0">First</paper-item>
    <paper-item data-order="1">Second</paper-item>
    <paper-item data-order="2">Third</paper-item>
  </paper-listbox>
</paper-dropdown-menu>