Add multi option

demo/index.html

@@ -198,6 +198,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 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)">
+          <paper-listbox class="dropdown-content">
+            <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

@@ -279,8 +279,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]]">
       <div class="dropdown-trigger">
         <label hidden$="[[!label]]"
             class$="[[_computeLabelClass(noLabelFloat,alwaysFloatLabel,hasContent)]]">[[label]]</label>
@@ -428,6 +429,14 @@
           hasContent: {
             type: Boolean,
             readOnly: true
+          },
+
+          /**
+           * If true, multiple selections are allowed.
+           */
+          multi: {
+            type: Boolean,
+            value: false
           }
         },
 
@@ -489,7 +498,7 @@
          * @param {CustomEvent} event An `iron-select` event.
          */
         _onIronSelect: function(event) {
-          this._setSelectedItem(event.detail.item);
+          this._setSelectedItem(event.detail.item.parentElement.selectedItems);
         },
 
         /**
@@ -498,7 +507,7 @@
          * @param {CustomEvent} event An `iron-deselect` event.
          */
         _onIronDeselect: function(event) {
-          this._setSelectedItem(null);
+          this._setSelectedItem(event.detail.item.parentElement.selectedItems);
         },
 
         /**
@@ -518,12 +527,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.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

@@ -96,8 +96,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]]">
       <div class="dropdown-trigger">
         <paper-ripple></paper-ripple>
         <!-- paper-input has type="text" for a11y, do not remove -->
@@ -255,6 +256,14 @@
           verticalAlign: {
             type: String,
             value: 'top'
+          },
+
+          /**
+           * If true, multiple selections are allowed.
+           */
+          multi: {
+            type: Boolean,
+            value: false
           }
         },
 
@@ -315,7 +324,7 @@
          * @param {CustomEvent} event An `iron-select` event.
          */
         _onIronSelect: function(event) {
-          this._setSelectedItem(event.detail.item);
+          this._setSelectedItem(event.detail.item.parentElement.selectedItems);
         },
 
         /**
@@ -324,7 +333,7 @@
          * @param {CustomEvent} event An `iron-deselect` event.
          */
         _onIronDeselect: function(event) {
-          this._setSelectedItem(null);
+          this._setSelectedItem(event.detail.item.parentElement.selectedItems);
         },
 
         /**
@@ -344,12 +353,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);