fixes #81, #104

adding new `attrForSelected` attribute to specify an attribute whose value to use as this elements `value`
PolymerElements · Dec 13, 2015 · aa8d140 · aa8d140
1 parent 9ec17be
commit aa8d140
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 6 deletions.
diff --git 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" attr-for-selected="value">
+            <paper-listbox class="dropdown-content">
+              <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
@@ -223,15 +223,24 @@
 
           /**
            * 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`
            */
           value: {
             type: String,
             notify: true,
             readOnly: true
           },
 
+          /**
+           * If you want to use the attribute value of an element for selected
+           * instead of `selectedItemLabel`, set this to the name of the attribute.
+           * This will affect from where the value of the element is taken.
+           */
+          attrForSelected: {
+            type: String
+          },
+
           /**
            * The label for the dropdown.
            */
@@ -390,15 +399,17 @@
          * optional `label` property.
          */
         _selectedItemChanged: function(selectedItem) {
-          var value = '';
+          var value = '',
+              label = '';
           if (!selectedItem) {
-            value = '';
+            value = label = '';
           } else {
-            value = selectedItem.label || selectedItem.textContent.trim();
+            label = selectedItem.label || selectedItem.textContent.trim();
+            value = selectedItem[this.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
@@ -49,6 +49,28 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="TrivialCustomValueDropdownMenu">
+    <template>
+      <paper-dropdown-menu no-animations attr-for-selected="customValueAttr">
+        <paper-listbox class="dropdown-content">
+          <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;