From 1b47216f51bec40a2b3290e60be92e39493966bd Mon Sep 17 00:00:00 2001
From: Francis Daigle <francis@francisdaigle.com>
Date: Tue, 21 Nov 2017 15:00:47 -0700
Subject: [PATCH] Add 'ignoreSelect'

Add option to disable automatic closing of dropdown after selection made by exposing paper-menu-button ignoreSelect.
---
 demo/index.html                     | 23 +++++++++++++++++++++
 paper-dropdown-menu-light.html      | 13 ++++++++++--
 paper-dropdown-menu.html            | 13 ++++++++++--
 test/paper-dropdown-menu-light.html | 31 +++++++++++++++++++++++++++++
 test/paper-dropdown-menu.html       | 31 +++++++++++++++++++++++++++++
 5 files changed, 107 insertions(+), 4 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 0cd7c10..df21e5e 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -259,6 +259,29 @@ <h4>You can style a paper-dropdown-menu using custom properties</h4>
         </paper-dropdown-menu-light>
       </template>
     </demo-snippet>
+
+    <h4>This is a multiselect paper-dropdown-menu</h4>
+    <demo-snippet class="centered-demo">
+      <template>
+        <paper-dropdown-menu label="Dinosaurs" ignore-select>
+          <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)" ignore-select>
+          <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>
   </div>
 
   <script>
diff --git a/paper-dropdown-menu-light.html b/paper-dropdown-menu-light.html
index 31ea351..a448ba2 100644
--- a/paper-dropdown-menu-light.html
+++ b/paper-dropdown-menu-light.html
@@ -292,8 +292,8 @@
       on-iron-select="_onIronSelect"
       on-iron-deselect="_onIronDeselect"
       opened="{{opened}}"
-      close-on-activate
-      allow-outside-scroll="[[allowOutsideScroll]]">
+      allow-outside-scroll="[[allowOutsideScroll]]"
+      ignore-select="[[ignoreSelect]]">
       <!-- 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 +443,15 @@
           hasContent: {
             type: Boolean,
             readOnly: true
+          },
+
+          /**
+           * Set to true to disable automatically closing the dropdown after
+           * a selection has been made.
+           */
+          ignoreSelect: {
+            type: Boolean,
+            value: false
           }
         },
 
diff --git a/paper-dropdown-menu.html b/paper-dropdown-menu.html
index 4873f9e..27f8c57 100644
--- a/paper-dropdown-menu.html
+++ b/paper-dropdown-menu.html
@@ -97,9 +97,9 @@
       on-iron-select="_onIronSelect"
       on-iron-deselect="_onIronDeselect"
       opened="{{opened}}"
-      close-on-activate
       allow-outside-scroll="[[allowOutsideScroll]]"
-      restore-focus-on-close="[[restoreFocusOnClose]]">
+      restore-focus-on-close="[[restoreFocusOnClose]]"
+      ignore-select="[[ignoreSelect]]">
       <!-- support hybrid mode: user might be using paper-menu-button 1.x which distributes via <content> -->
       <div class="dropdown-trigger" slot="dropdown-trigger">
         <paper-ripple></paper-ripple>
@@ -278,6 +278,15 @@
             type: Boolean,
             value: true
           },
+
+          /**
+           * Set to true to disable automatically closing the dropdown after
+           * a selection has been made.
+           */
+          ignoreSelect: {
+            type: Boolean,
+            value: false
+          }
         },
 
         listeners: {
diff --git a/test/paper-dropdown-menu-light.html b/test/paper-dropdown-menu-light.html
index f5ac5fd..3b5389b 100644
--- a/test/paper-dropdown-menu-light.html
+++ b/test/paper-dropdown-menu-light.html
@@ -58,6 +58,18 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="MultiselectDropdownMenu">
+    <template>
+      <paper-dropdown-menu-light no-animations ignore-select>
+        <paper-listbox slot="dropdown-content" class="dropdown-content" selected-values="[0,1]" multi>
+          <paper-item>Foo</paper-item>
+          <paper-item>Bar</paper-item>
+          <paper-item>Baz</paper-item>
+        </paper-listbox>
+      </paper-dropdown-menu-light>
+    </template>
+  </test-fixture>
+
   <script>
 
     function runAfterOpen(dropdownMenu, callback) {
@@ -225,6 +237,25 @@
           expect(dropdownMenu.selectedItemLabel).to.be.equal('Foo textContent');
         });
       });
+
+      suite('multiselect', function() {
+        setup(function(done) {
+          dropdownMenu = fixture('MultiselectDropdownMenu');
+          content = Polymer.dom(dropdownMenu).querySelector('[slot="dropdown-content"]');
+          // Wait for distribution.
+          Polymer.Base.async(function() {
+            done();
+          });
+        });
+
+        test('makes multiple selections', function() {
+          expect(content.selectedValues.length).to.be.equal(2);
+        });
+
+        test('ignores select', function() {
+          expect(dropdownMenu.ignoreSelect).to.be.true;
+        });
+      });
     });
   </script>
 
diff --git a/test/paper-dropdown-menu.html b/test/paper-dropdown-menu.html
index 4c74e02..5e63b77 100644
--- a/test/paper-dropdown-menu.html
+++ b/test/paper-dropdown-menu.html
@@ -58,6 +58,18 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="MultiselectDropdownMenu">
+    <template>
+      <paper-dropdown-menu no-animations ignore-select>
+        <paper-listbox slot="dropdown-content" class="dropdown-content" selected-values="[0,1]" multi>
+          <paper-item>Foo</paper-item>
+          <paper-item>Bar</paper-item>
+          <paper-item>Baz</paper-item>
+        </paper-listbox>
+      </paper-dropdown-menu>
+    </template>
+  </test-fixture>
+
   <script>
 
     function runAfterOpen(dropdownMenu, callback) {
@@ -225,6 +237,25 @@
           expect(dropdownMenu.selectedItemLabel).to.be.equal('Foo textContent');
         });
       });
+
+      suite('multiselect', function() {
+        setup(function(done) {
+          dropdownMenu = fixture('MultiselectDropdownMenu');
+          content = Polymer.dom(dropdownMenu).querySelector('[slot="dropdown-content"]');
+          // Wait for distribution.
+          Polymer.Base.async(function() {
+            done();
+          });
+        });
+
+        test('makes multiple selections', function() {
+          expect(content.selectedValues.length).to.be.equal(2);
+        });
+
+        test('ignores select', function() {
+          expect(dropdownMenu.ignoreSelect).to.be.true;
+        });
+      });
     });
   </script>