Unable to pre select first item from drop down menu in polymer 2.x

0
votes

I am using paper-dropdown-menu in Polymer 2.x as shown below:

<paper-dropdown-menu label="Person" class="item">
  <paper-listbox id="name" slot="dropdown-content" attr-for-selected="value" selected="{{selName}}" on-iron-select="nameSelected">
    <paper-item value="John">John</paper-item>
    <paper-item value="Bush">Bush</paper-item>
    <paper-item value="Afridi">Afridi</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

When I select some item from above drop down menu, the drop down is populated based on the selected value as shown below:

<paper-dropdown-menu label="Balance" class="item">
  <paper-listbox id="Balance" slot="dropdown-content" attr-for-selected="value" selected="{{selValue}}">
    <template is="dom-repeat" items="[[data]]">
      <paper-item value="{{item}}">{{item}}</paper-item>
    </template>
  </paper-listbox>
</paper-dropdown-menu>

Event Handler

nameSelected(event) {
  var selectedItem = event.target.selectedItem.textContent;
  this.data = [];
  if (selectedItem === 'John') {
    for (var i = 0; i < 20; i++) {
      this.data.push(i);
    }
  } else {
    for (var i = 20; i < 40; i++) {
      this.data.push(i);
    }
  }

  this.selValue = this.data[0];
}

When first time page loads, then first value (which is John) from Person drop down menu is pre-selected. Due to this, the first item in Balance drop down menu (which is zero) is also pre-selected. This is fine. The problem is that when I change selection in the Person drop down menu, then although Balance drop down menu is correctly populated but first value is not preselected.

Can you please guide me to fix this issue.

1
polymerpolymer-2.x
I have tried to implement simple Polymer app to reproduce it and I couldn't. Polymer is able to select element if there are more than 1000 items. Can you updated your question so that it is possible to reproduce it? – Andrii Litvinov
I have simplified my question. Hope it helps. – Moazzam
It does help, it makes completely different sense to the question. Check my answer, hope it helps. – Andrii Litvinov

1 Answers

1
votes

Looks like it's a bug in preview version of polymer 2.0 element. I have managed to make it work with following code:

if (this.selValue !== this.data[0]) {
  this.selValue = undefined;
  setTimeout(() => { this.selValue = this.data[0]; }, 0);
}