From 2bd9f47b3a203f3bfaa2d95e77ecd3a8f16dbcc8 Mon Sep 17 00:00:00 2001
From: FarbodGhasemi <Farbod.ghasemi762@hotmail.com>
Date: Sat, 10 Aug 2019 17:05:21 +0430
Subject: [PATCH 1/2] fix issue #229

adds the option to set the dropdown to be the same width as the selectbox
---
 demo/index.html              | 24 ++++++++++++++++++++++++
 paper-dropdown-menu-light.js | 23 +++++++++++++++++++++--
 paper-dropdown-menu.js       | 21 ++++++++++++++++++++-
 3 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 381da76..91a4444 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -297,6 +297,30 @@ <h4>You can style a paper-dropdown-menu using custom properties</h4>
         </paper-dropdown-menu-light>
       </template>
     </demo-snippet>
+
+
+    <h4>You can set the dropdown to be the same size az the selectbox</h4>
+    <demo-snippet class="centered-demo">
+      <template>
+        <paper-dropdown-menu label="Dinosaurs" vertical-offset="56" full-width-dropdown>
+          <paper-listbox slot="dropdown-content" class="dropdown-content" selected="1">
+            <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)" vertical-offset="56" full-width-dropdown>
+          <paper-listbox slot="dropdown-content" class="dropdown-content" selected="1">
+            <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>
 </body>
 </html>
diff --git a/paper-dropdown-menu-light.js b/paper-dropdown-menu-light.js
index 4221f5a..2544c82 100644
--- a/paper-dropdown-menu-light.js
+++ b/paper-dropdown-menu-light.js
@@ -20,6 +20,7 @@ import {IronButtonState} from '@polymer/iron-behaviors/iron-button-state.js';
 import {IronControlState} from '@polymer/iron-behaviors/iron-control-state.js';
 import {IronFormElementBehavior} from '@polymer/iron-form-element-behavior/iron-form-element-behavior.js';
 import {IronValidatableBehavior} from '@polymer/iron-validatable-behavior/iron-validatable-behavior.js';
+import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
 import {PaperRippleBehavior} from '@polymer/paper-behaviors/paper-ripple-behavior.js';
 import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
 import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
@@ -301,7 +302,8 @@ Polymer({
     IronControlState,
     PaperRippleBehavior,
     IronFormElementBehavior,
-    IronValidatableBehavior
+    IronValidatableBehavior,
+    IronResizableBehavior
   ],
 
   properties: {
@@ -392,7 +394,12 @@ Polymer({
      */
     verticalOffset: Number,
 
-    hasContent: {type: Boolean, readOnly: true}
+    hasContent: {type: Boolean, readOnly: true},
+
+    /**
+     * Whether the dropdown should be the same size az the selectbox.
+     */
+    fullWidthDropdown : {type: Boolean, value: false}
   },
 
   listeners: {'tap': '_onTap'},
@@ -423,6 +430,18 @@ Polymer({
     }
   },
 
+  /**
+   * When the element is ready
+   */
+  ready() {
+    if(this.fullWidthDropdown) {
+      var ironDropdown = this.$.menuButton.root.querySelector('iron-dropdown');
+      this.addEventListener('iron-resize', () => {
+        setTimeout(() => {ironDropdown.style.width = this.root.host.offsetWidth+'px'}, 10);
+      },this);
+    }
+  },
+
   /**
    * The content element that is contained by the dropdown menu, if any.
    */
diff --git a/paper-dropdown-menu.js b/paper-dropdown-menu.js
index 7d17e97..45e8d2f 100644
--- a/paper-dropdown-menu.js
+++ b/paper-dropdown-menu.js
@@ -22,6 +22,7 @@ import {IronButtonState} from '@polymer/iron-behaviors/iron-button-state.js';
 import {IronControlState} from '@polymer/iron-behaviors/iron-control-state.js';
 import {IronFormElementBehavior} from '@polymer/iron-form-element-behavior/iron-form-element-behavior.js';
 import {IronValidatableBehavior} from '@polymer/iron-validatable-behavior/iron-validatable-behavior.js';
+import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
 import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
 import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
 import * as gestures from '@polymer/polymer/lib/utils/gestures.js';
@@ -110,7 +111,8 @@ Polymer({
     IronButtonState,
     IronControlState,
     IronFormElementBehavior,
-    IronValidatableBehavior
+    IronValidatableBehavior,
+    IronResizableBehavior
   ],
 
   properties: {
@@ -217,6 +219,11 @@ Polymer({
      * Whether focus should be restored to the dropdown when the menu closes.
      */
     restoreFocusOnClose: {type: Boolean, value: true},
+
+    /**
+     * Whether the dropdown should be the same size az the selectbox.
+     */
+    fullWidthDropdown : {type: Boolean, value: false, reflectToAttribute: true}
   },
 
   listeners: {'tap': '_onTap'},
@@ -243,6 +250,18 @@ Polymer({
     }
   },
 
+  /**
+   * When the element is ready
+   */
+  ready() {
+    if(this.fullWidthDropdown) {
+      var ironDropdown = this.$.menuButton.root.querySelector('iron-dropdown');
+      this.addEventListener('iron-resize', () => {
+        setTimeout(() => {ironDropdown.style.width = this.root.host.offsetWidth+'px'}, 10);
+      },this);
+    }
+  },
+
   /**
    * The content element that is contained by the dropdown menu, if any.
    */

From 08a91145dc270e3b21739e810fd5e75e0e9ef36d Mon Sep 17 00:00:00 2001
From: FarbodGhasemi <Farbod.ghasemi762@hotmail.com>
Date: Sat, 10 Aug 2019 17:19:06 +0430
Subject: [PATCH 2/2] fix lint issues

---
 paper-dropdown-menu-light.js | 13 ++++++++-----
 paper-dropdown-menu.js       | 13 ++++++++-----
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/paper-dropdown-menu-light.js b/paper-dropdown-menu-light.js
index 2544c82..4439d86 100644
--- a/paper-dropdown-menu-light.js
+++ b/paper-dropdown-menu-light.js
@@ -19,8 +19,8 @@ import './paper-dropdown-menu-shared-styles.js';
 import {IronButtonState} from '@polymer/iron-behaviors/iron-button-state.js';
 import {IronControlState} from '@polymer/iron-behaviors/iron-control-state.js';
 import {IronFormElementBehavior} from '@polymer/iron-form-element-behavior/iron-form-element-behavior.js';
-import {IronValidatableBehavior} from '@polymer/iron-validatable-behavior/iron-validatable-behavior.js';
 import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
+import {IronValidatableBehavior} from '@polymer/iron-validatable-behavior/iron-validatable-behavior.js';
 import {PaperRippleBehavior} from '@polymer/paper-behaviors/paper-ripple-behavior.js';
 import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
 import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
@@ -399,7 +399,7 @@ Polymer({
     /**
      * Whether the dropdown should be the same size az the selectbox.
      */
-    fullWidthDropdown : {type: Boolean, value: false}
+    fullWidthDropdown: {type: Boolean, value: false}
   },
 
   listeners: {'tap': '_onTap'},
@@ -434,11 +434,14 @@ Polymer({
    * When the element is ready
    */
   ready() {
-    if(this.fullWidthDropdown) {
+    if (this.fullWidthDropdown) {
       var ironDropdown = this.$.menuButton.root.querySelector('iron-dropdown');
       this.addEventListener('iron-resize', () => {
-        setTimeout(() => {ironDropdown.style.width = this.root.host.offsetWidth+'px'}, 10);
-      },this);
+        setTimeout(
+            () => {ironDropdown.style.width =
+                       this.root.host.offsetWidth + 'px'},
+            10);
+      }, this);
     }
   },
 
diff --git a/paper-dropdown-menu.js b/paper-dropdown-menu.js
index 45e8d2f..87bdfe4 100644
--- a/paper-dropdown-menu.js
+++ b/paper-dropdown-menu.js
@@ -21,8 +21,8 @@ import './paper-dropdown-menu-shared-styles.js';
 import {IronButtonState} from '@polymer/iron-behaviors/iron-button-state.js';
 import {IronControlState} from '@polymer/iron-behaviors/iron-control-state.js';
 import {IronFormElementBehavior} from '@polymer/iron-form-element-behavior/iron-form-element-behavior.js';
-import {IronValidatableBehavior} from '@polymer/iron-validatable-behavior/iron-validatable-behavior.js';
 import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
+import {IronValidatableBehavior} from '@polymer/iron-validatable-behavior/iron-validatable-behavior.js';
 import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
 import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
 import * as gestures from '@polymer/polymer/lib/utils/gestures.js';
@@ -223,7 +223,7 @@ Polymer({
     /**
      * Whether the dropdown should be the same size az the selectbox.
      */
-    fullWidthDropdown : {type: Boolean, value: false, reflectToAttribute: true}
+    fullWidthDropdown: {type: Boolean, value: false, reflectToAttribute: true}
   },
 
   listeners: {'tap': '_onTap'},
@@ -254,11 +254,14 @@ Polymer({
    * When the element is ready
    */
   ready() {
-    if(this.fullWidthDropdown) {
+    if (this.fullWidthDropdown) {
       var ironDropdown = this.$.menuButton.root.querySelector('iron-dropdown');
       this.addEventListener('iron-resize', () => {
-        setTimeout(() => {ironDropdown.style.width = this.root.host.offsetWidth+'px'}, 10);
-      },this);
+        setTimeout(
+            () => {ironDropdown.style.width =
+                       this.root.host.offsetWidth + 'px'},
+            10);
+      }, this);
     }
   },