From eae03349b07019beb389541fa07f5766fe4cfee0 Mon Sep 17 00:00:00 2001
From: Maurice Williams <morficus@gmail.com>
Date: Sat, 12 Dec 2015 23:42:01 -0500
Subject: [PATCH] fixes #81, fixes #104 adding new `attrForSelected` attribute
 to specify an attribute whose value to use as this elements `value`

---
 demo/index.html               | 15 +++++++++
 paper-dropdown-menu.html      | 18 ++++++-----
 test/paper-dropdown-menu.html | 58 +++++++++++++++++++++++++++++++++++
 3 files changed, 83 insertions(+), 8 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 6bb23be..fee90cb 100644
--- a/demo/index.html
+++ b/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>
diff --git a/paper-dropdown-menu.html b/paper-dropdown-menu.html
index 3701aec..a14c58f 100644
--- a/paper-dropdown-menu.html
+++ b/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);
         },
 
         /**
diff --git a/test/paper-dropdown-menu.html b/test/paper-dropdown-menu.html
index a1630b6..8e19910 100644
--- a/test/paper-dropdown-menu.html
+++ b/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;