paper-dropdown-menu selected property issue

Question

Hello:

I have a paper-dropdown-menu that is filled from an observable variable, whenever the variable changes I want to re-select the first item. The first time it works correctly however, the next times it keeps selecting the same first element that was first selected. This is the component's html and dart code;

paper_dropdown_menu_bug_test.dart

import 'package:polymer/polymer.dart';

@CustomTag('paper-dropdown-menu-bug-test')
class PaperDropdownMenuBugTest extends PolymerElement {
  @observable List list;

  PaperDropdownMenuBugTest.created() : super.created(){
    this.list = [0, 1, 2];    
  }

  listChanged(){
    this.$["paper-dropdown-menu"].selected = 0;
  }

  changeList(){
    this.list = [3, 4, 5]; 
  }
}

paper_dropdown_menu_bug_test.html

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/paper_elements/paper_dropdown_menu.html">
<link rel="import" href="packages/paper_elements/paper_item.html">

<polymer-element name="paper-dropdown-menu-bug-test">
  <template>
    <paper-dropdown-menu id="paper-dropdown-menu">
      <template repeat="{{item in list}}">
        <paper-item label="{{item}}"></paper-item>
      </template>
    </paper-dropdown-menu>
    <button on-click="{{changeList}}">Change List</button>
  </template>
  <script type="application/dart" src="paper_dropdown_menu_bug_test.dart"></script>
</polymer-element>

Am I Doing it wrong, is there a workaround or should I fill a bug report? (I have already tried selecting another index and then 0, but does not work)

Thanks in advance

Answer 1

You need to add valueattr="label" to configure <paper-dropdown-menu> to use the label value to select the item.

<paper-dropdown-menu id="paper-dropdown-menu" valueattr="label">

---

Some additional suggestions:

Instead of

listChanged(){
  this.$["paper-dropdown-menu"].selected = 0;
}

use

<paper-dropdown-menu id="paper-dropdown-menu" selected="{{selected}}" valueattr="label">

@observable var selected;

listChanged() => selected = list.first;

---

It has the same effect if you write

@observable List list = [0, 1, 2];

PaperDropdownMenuBugTest.created() : super.created()

or

@observable List list;

PaperDropdownMenuBugTest.created() : super.created(){
  this.list = [0, 1, 2];    
}