fixes #81, #104

demo/index.html

@@ -90,6 +90,21 @@ <h4>Pre-selected Value</h4>
       </div>
     </div>
 
+    <div class="horizontal-section-container">
+      <div>
+        <h4>Custom value attribute</h4>
+        <div class="horizontal-section">
+          <paper-dropdown-menu id="customValueAttr" label="Dinosaurs">
+            <paper-listbox class="dropdown-content" attr-for-selected="value">
+              <template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
+                <paper-item value="[[index]]">[[dinosaur]]</paper-item>
+              </template>
+            </paper-listbox>
+          </paper-dropdown-menu>
+        </div>
+      </div>
+    </div>
+
     <div class="horizontal-section-container">
       <div>
         <h4>Disabled</h4>

paper-dropdown-menu.html

@@ -223,8 +223,9 @@
 
           /**
            * The value for this element that will be used when submitting in
-           * a form. It is read only, and will always have the same value
-           * as `selectedItemLabel`.
+           * a form. It is read only, and will default to the same value
+           * as `selectedItemLabel` but can be customized with `attrForSelected`
+           * attribute on the contained list item.
            */
           value: {
             type: String,
@@ -390,15 +391,16 @@
          * optional `label` property.
          */
         _selectedItemChanged: function(selectedItem) {
-          var value = '';
-          if (!selectedItem) {
-            value = '';
-          } else {
-            value = selectedItem.label || selectedItem.textContent.trim();
+          var value = '',
+              label = '';
+
+          if (selectedItem) {
+            label = selectedItem.label || selectedItem.textContent.trim();
+            value = selectedItem[this.contentElement.attrForSelected] || label;
           }
 
           this._setValue(value);
-          this._setSelectedItemLabel(value);
+          this._setSelectedItemLabel(label);
         },
 
         /**

test/paper-dropdown-menu.html

@@ -49,6 +49,28 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="TrivialCustomValueDropdownMenu">
+    <template>
+      <paper-dropdown-menu no-animations>
+        <paper-listbox class="dropdown-content" attr-for-selected="customValueAttr">
+          <paper-item customValueAttr="first">Foo</paper-item>
+          <paper-item customValueAttr="second">Bar</paper-item>
+        </paper-listbox>
+      </paper-dropdown-menu>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="PreselectedCustomValueDropdownMenu">
+    <template>
+      <paper-dropdown-menu no-animations>
+        <paper-listbox class="dropdown-content" selected="1" attr-for-selected="customValueAttr">
+          <paper-item customValueAttr="first">Foo</paper-item>
+          <paper-item customValueAttr="second">Bar</paper-item>
+        </paper-listbox>
+      </paper-dropdown-menu>
+    </template>
+  </test-fixture>
+
   <script>
 
     suite('<paper-dropdown-menu>', function() {
@@ -109,6 +131,26 @@
         });
       });
 
+      suite('when a custom attribute value is specified', function (done) {
+        setup(function() {
+          dropdownMenu = fixture('TrivialCustomValueDropdownMenu');
+        });
+
+        test('sets value to the custom attribute indicated by attrForSelected', function(done) {
+          MockInteractions.tap(dropdownMenu);
+
+          Polymer.Base.async(function() {
+            var firstItem = Polymer.dom(content).querySelector('paper-item');
+            MockInteractions.tap(firstItem);
+
+            Polymer.Base.async(function() {
+              expect(dropdownMenu.value).to.be.equal(firstItem.customValueAttr);
+              done();
+            });
+          });
+        });
+      });
+
       suite('when a value is preselected', function() {
         setup(function() {
           dropdownMenu = fixture('PreselectedDropdownMenu');
@@ -121,6 +163,22 @@
         });
       });
 
+      suite('when a value is preselected and a custom attribute value is specified', function () {
+        setup(function() {
+          dropdownMenu = fixture('PreselectedCustomValueDropdownMenu');
+        });
+
+        test('sets value to the custom attribute indicated by attrForSelected', function() {
+
+          Polymer.Base.async(function() {
+            Polymer.dom.flush();
+            var secondItem = Polymer.dom(dropdownMenu).querySelector('paper-item')[1];
+            expect(dropdownMenu.value).to.be.equal(secondItem.customValueAttr);
+
+          });
+        });
+      });
+
       suite('deselecting', function() {
         var menu;