Add multiple selection support

demo/index.html

@@ -200,6 +200,29 @@ <h4>You can remove the ripple and the animations</h4>
       </template>
     </demo-snippet>
 
+    <h4>This is a multi paper-dropdown-menu</h4>
+    <demo-snippet class="centered-demo">
+      <template>
+        <paper-dropdown-menu label="Dinosaurs" multi>
+          <paper-listbox slot="dropdown-content" class="dropdown-content" multi>
+            <paper-item>allosaurus</paper-item>
+            <paper-item>brontosaurus</paper-item>
+            <paper-item>carcharodontosaurus</paper-item>
+            <paper-item>diplodocus</paper-item>
+          </paper-listbox>
+        </paper-dropdown-menu>
+
+        <paper-dropdown-menu-light label="Dinosaurs (light)" multi>
+          <paper-listbox slot="dropdown-content" class="dropdown-content" multi>
+            <paper-item>allosaurus</paper-item>
+            <paper-item>brontosaurus</paper-item>
+            <paper-item>carcharodontosaurus</paper-item>
+            <paper-item>diplodocus</paper-item>
+          </paper-listbox>
+        </paper-dropdown-menu-light>
+      </template>
+    </demo-snippet>
+
     <h4>You can style a paper-dropdown-menu using custom properties</h4>
     <demo-snippet class="centered-demo">
       <template>

paper-dropdown-menu-light.html

@@ -292,8 +292,9 @@
       on-iron-select="_onIronSelect"
       on-iron-deselect="_onIronDeselect"
       opened="{{opened}}"
-      close-on-activate
-      allow-outside-scroll="[[allowOutsideScroll]]">
+      allow-outside-scroll="[[allowOutsideScroll]]"
+      multi="[[multi]]"
+      ignore-select="[[multi]]">
       <!-- support hybrid mode: user might be using paper-menu-button 1.x which distributes via <content> -->
       <div class="dropdown-trigger" slot="dropdown-trigger">
         <label class$="[[_computeLabelClass(noLabelFloat,alwaysFloatLabel,hasContent)]]">
@@ -443,6 +444,14 @@
           hasContent: {
             type: Boolean,
             readOnly: true
+          },
+
+          /**
+           * If true, multiple selections are allowed.
+           */
+          multi: {
+            type: Boolean,
+            value: false
           }
         },
 
@@ -510,7 +519,7 @@
          * @param {CustomEvent} event An `iron-select` event.
          */
         _onIronSelect: function(event) {
-          this._setSelectedItem(event.detail.item);
+          this._setSelectedItem(event.detail.item.parentElement.selectedItems);
         },
 
         /**
@@ -519,7 +528,7 @@
          * @param {CustomEvent} event An `iron-deselect` event.
          */
         _onIronDeselect: function(event) {
-          this._setSelectedItem(null);
+          this._setSelectedItem(event.detail.item.parentElement.selectedItems);
         },
 
         /**
@@ -539,12 +548,12 @@
          * @param {Element} selectedItem A selected Element item, with an
          * optional `label` property.
          */
-        _selectedItemChanged: function(selectedItem) {
+        _selectedItemChanged: function(selectedItems) {
           var value = '';
-          if (!selectedItem) {
-            value = '';
-          } else {
-            value = selectedItem.label || selectedItem.getAttribute('label') || selectedItem.textContent.trim();
+          if (selectedItems.length) {
+            value = selectedItems.map((item) => {
+              return item && (item.label || item.getAttribute('label') || item.textContent.trim());
+            }).join(', ');
           }
 
           this._setValue(value);

paper-dropdown-menu.html

@@ -97,8 +97,9 @@
       on-iron-select="_onIronSelect"
       on-iron-deselect="_onIronDeselect"
       opened="{{opened}}"
-      close-on-activate
       allow-outside-scroll="[[allowOutsideScroll]]"
+      multi="[[multi]]"
+      ignore-select="[[multi]]"
       restore-focus-on-close="[[restoreFocusOnClose]]">
       <!-- support hybrid mode: user might be using paper-menu-button 1.x which distributes via <content> -->
       <div class="dropdown-trigger" slot="dropdown-trigger">
@@ -278,6 +279,13 @@
             type: Boolean,
             value: true
           },
+          /**
+           * If true, multiple selections are allowed.
+           */
+          multi: {
+            type: Boolean,
+            value: false
+          }
         },
 
         listeners: {
@@ -343,7 +351,7 @@
          * @param {CustomEvent} event An `iron-select` event.
          */
         _onIronSelect: function(event) {
-          this._setSelectedItem(event.detail.item);
+          this._setSelectedItem(event.detail.item.parentElement.selectedItems);
         },
 
         /**
@@ -352,7 +360,7 @@
          * @param {CustomEvent} event An `iron-deselect` event.
          */
         _onIronDeselect: function(event) {
-          this._setSelectedItem(null);
+          this._setSelectedItem(event.detail.item.parentElement.selectedItems);
         },
 
         /**
@@ -372,12 +380,12 @@
          * @param {Element} selectedItem A selected Element item, with an
          * optional `label` property.
          */
-        _selectedItemChanged: function(selectedItem) {
+        _selectedItemChanged: function(selectedItems) {
           var value = '';
-          if (!selectedItem) {
-            value = '';
-          } else {
-            value = selectedItem.label || selectedItem.getAttribute('label') || selectedItem.textContent.trim();
+          if (selectedItems.length) {
+            value = selectedItems.map((item) => {
+              return item && (item.label || item.getAttribute('label') || item.textContent.trim());
+            }).join(', ');
           }
 
           this._setValue(value);

test/paper-dropdown-menu-light.html

@@ -115,7 +115,7 @@
           MockInteractions.tap(firstItem);
 
           Polymer.Base.async(function() {
-            expect(dropdownMenu.selectedItem).to.be.equal(firstItem);
+            expect(dropdownMenu.selectedItem[0]).to.be.equal(firstItem);
             done();
           });
         });
@@ -132,7 +132,7 @@
 
         test('the input area shows the correct selection', function() {
           var secondItem = Polymer.dom(dropdownMenu).querySelectorAll('paper-item')[1];
-          expect(dropdownMenu.selectedItem).to.be.equal(secondItem);
+          expect(dropdownMenu.selectedItem[0]).to.be.equal(secondItem);
         });
       });
 
@@ -148,7 +148,7 @@
 
         test('an `iron-deselect` event clears the current selection', function() {
           content.selected = null;
-          expect(dropdownMenu.selectedItem).to.be.equal(null);
+          expect(dropdownMenu.selectedItem.pop()).to.be.equal(undefined);
         });
       });
 
@@ -210,14 +210,18 @@
 
         test('label property', function() {
           content.selected = 0;
-          //Fake a label property since paper-item doesn't have one
-          dropdownMenu.selectedItem.label = dropdownMenu.selectedItem.getAttribute('label');
-          expect(dropdownMenu.selectedItemLabel).to.be.equal('Foo label property');
+	  Polymer.Base.async(function() {
+	    //Fake a label property since paper-item doesn't have one
+            dropdownMenu.selectedItem[0].label = dropdownMenu.selectedItem[0].getAttribute('label');
+            expect(dropdownMenu.selectedItemLabel).to.be.equal('Foo label property');
+          });
         });
 
         test('label attribute', function() {
           content.selected = 1;
-          expect(dropdownMenu.selectedItemLabel).to.be.equal('Foo label attribute');
+	  Polymer.Base.async(function() {
+	    expect(dropdownMenu.selectedItemLabel).to.be.equal('Foo label attribute');
+          });
         });
 
         test('textContent', function() {
@@ -229,4 +233,4 @@
   </script>
 
 </body>
-</html>
+</html>

test/paper-dropdown-menu.html

@@ -115,7 +115,7 @@
           MockInteractions.tap(firstItem);
 
           Polymer.Base.async(function() {
-            expect(dropdownMenu.selectedItem).to.be.equal(firstItem);
+            expect(dropdownMenu.selectedItem[0]).to.be.equal(firstItem);
             done();
           });
         });
@@ -132,7 +132,7 @@
 
         test('the input area shows the correct selection', function() {
           var secondItem = Polymer.dom(dropdownMenu).querySelectorAll('paper-item')[1];
-          expect(dropdownMenu.selectedItem).to.be.equal(secondItem);
+          expect(dropdownMenu.selectedItem[0]).to.be.equal(secondItem);
         });
       });
 
@@ -148,7 +148,7 @@
 
         test('an `iron-deselect` event clears the current selection', function() {
           content.selected = null;
-          expect(dropdownMenu.selectedItem).to.be.equal(null);
+          expect(dropdownMenu.selectedItem.pop()).to.be.equal(undefined);
         });
       });
 
@@ -210,14 +210,18 @@
 
         test('label property', function() {
           content.selected = 0;
-          //Fake a label property since paper-item doesn't have one
-          dropdownMenu.selectedItem.label = dropdownMenu.selectedItem.getAttribute('label');
-          expect(dropdownMenu.selectedItemLabel).to.be.equal('Foo label property');
+	  Polymer.Base.async(function() {
+	    //Fake a label property since paper-item doesn't have one
+            dropdownMenu.selectedItem[0].label = dropdownMenu.selectedItem[0].getAttribute('label');
+            expect(dropdownMenu.selectedItemLabel).to.be.equal('Foo label property');
+          });
         });
 
         test('label attribute', function() {
           content.selected = 1;
-          expect(dropdownMenu.selectedItemLabel).to.be.equal('Foo label attribute');
+	  Polymer.Base.async(function() {
+	    expect(dropdownMenu.selectedItemLabel).to.be.equal('Foo label attribute');
+          });
         });
 
         test('textContent', function() {
@@ -229,4 +233,4 @@
   </script>
 
 </body>
-</html>
+</html>