update elements and fix some bugs

lib/src/paper-dropdown-menu/paper-dropdown-menu.html

 <!--
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../paper-styles/default-theme.html">
 <link rel="import" href="../paper-input/paper-input.html">
 <link rel="import" href="../paper-menu-button/paper-menu-button.html">
 <link rel="import" href="../paper-ripple/paper-ripple.html">
 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
 <link rel="import" href="../iron-behaviors/iron-control-state.html">
 <link rel="import" href="../iron-behaviors/iron-button-state.html">
 <link rel="import" href="../iron-icons/iron-icons.html">
 <link rel="import" href="../iron-icon/iron-icon.html">
 <link rel="import" href="../iron-selector/iron-selectable.html">
+<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
+<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
 
 <!--
+Material design: [Dropdown menus](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons)
+
 `paper-dropdown-menu` is similar to a native browser select element.
 `paper-dropdown-menu` works with selectable content. The currently selected
 item is displayed in the control. If no item is selected, the `label` is
 displayed instead.
 
 The child element with the class `dropdown-content` will be used as the dropdown
 menu. It could be a `paper-menu` or element that triggers `iron-select` when
 selecting its children.
 
 Example:
 
     <paper-dropdown-menu label="Your favourite pastry">
       <paper-menu class="dropdown-content">
         <paper-item>Croissant</paper-item>
         <paper-item>Donut</paper-item>
         <paper-item>Financier</paper-item>
         <paper-item>Madeleine</paper-item>
       </paper-menu>
     </paper-dropdown-menu>
 
 This example renders a dropdown menu with 4 options.
 
+Similarly to using `iron-select`, `iron-deselect` events will cause the
+current selection of the `paper-dropdown-menu` to be cleared.
+
 ### Styling
 
 The following custom properties and mixins are also available for styling:
 
 Custom property | Description | Default
 ----------------|-------------|----------
 `--paper-dropdown-menu` | A mixin that is applied to the element host | `{}`
 `--paper-dropdown-menu-disabled` | A mixin that is applied to the element host when disabled | `{}`
 `--paper-dropdown-menu-ripple` | A mixin that is applied to the internal ripple | `{}`
 `--paper-dropdown-menu-button` | A mixin that is applied to the internal menu button | `{}`
@@ skipping 11 matching lines @@
 -->
 
 <dom-module id="paper-dropdown-menu">
   <style>
     :host {
       display: inline-block;
       position: relative;
       text-align: left;
       cursor: pointer;
 
+      /* NOTE(cdata): Both values are needed, since some phones require the
+       * value to be `transparent`.
+       */
+      -webkit-tap-highlight-color: rgba(0,0,0,0);
+      -webkit-tap-highlight-color: transparent;
+
       --paper-input-container-input: {
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
         max-width: 100%;
         box-sizing: border-box;
         cursor: pointer;
       };
 
       @apply(--paper-dropdown-menu);
     }
 
     :host([disabled]) {
       @apply(--paper-dropdown-menu-disabled);
     }
 
     :host([noink]) paper-ripple {
       display: none;
     }
 
     :host([no-label-float]) paper-ripple {
       top: 8px;
     }
 
     paper-ripple {
-      top: 20px;
-      left: 8px;
-      bottom: 16px;
-      right: 8px;
+      top: 12px;
+      left: 0px;
+      bottom: 8px;
+      right: 0px;
 
       @apply(--paper-dropdown-menu-ripple);
     }
 
     paper-menu-button {
+      display: block;
+      padding: 0;
       @apply(--paper-dropdown-menu-button);
     }
 
     paper-input {
       @apply(--paper-dropdown-menu-input);
     }
 
     iron-icon {
       color: var(--disabled-text-color);
 
       @apply(--paper-dropdown-menu-icon);
     }
 
   </style>
   <template>
     <paper-menu-button
       id="menuButton"
       vertical-align="top"
       horizontal-align="right"
       vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]"
       disabled="[[disabled]]"
       no-animations="[[noAnimations]]"
       on-iron-select="_onIronSelect"
+      on-iron-deselect="_onIronDeselect"
       opened="{{opened}}">
       <div class="dropdown-trigger">
         <paper-ripple></paper-ripple>
         <paper-input
+          invalid="[[invalid]]"
           readonly
           disabled="[[disabled]]"
           value="[[selectedItemLabel]]"
           placeholder="[[placeholder]]"
           always-float-label="[[alwaysFloatLabel]]"
           no-label-float="[[noLabelFloat]]"
           label="[[label]]">
           <iron-icon icon="arrow-drop-down" suffix></iron-icon>
         </paper-input>
       </div>
@@ skipping 15 matching lines @@
        */
 
       /**
        * Fired when the dropdown closes.
        *
        * @event paper-dropdown-close
        */
 
       behaviors: [
         Polymer.IronControlState,
-        Polymer.IronButtonState
+        Polymer.IronButtonState,
+        Polymer.IronFormElementBehavior,
+        Polymer.IronValidatableBehavior
       ],
 
       properties: {
         /**
          * The derived "label" of the currently selected item. This value
          * is the `label` property on the selected item if set, or else the
          * trimmed text content of the selected item.
          */
         selectedItemLabel: {
           type: String,
           notify: true,
-          computed: '_computeSelectedItemLabel(selectedItem)'
+          readOnly: true
         },
 
         /**
          * The last selected item. An item is selected if the dropdown menu has
          * a child with class `dropdown-content`, and that child triggers an
          * `iron-select` event with the selected `item` in the `detail`.
+         *
+         * @type {?Object}
          */
         selectedItem: {
           type: Object,
           notify: true,
           readOnly: true
         },
 
         /**
+         * 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`.
+         */
+        value: {
+          type: String,
+          notify: true,
+          readOnly: true
+        },
+
+        /**
          * The label for the dropdown.
          */
         label: {
           type: String
         },
 
         /**
          * The placeholder for the dropdown.
          */
         placeholder: {
@@ skipping 45 matching lines @@
       keyBindings: {
         'up down': 'open',
         'esc': 'close'
       },
 
       hostAttributes: {
         role: 'group',
         'aria-haspopup': 'true'
       },
 
+      observers: [
+        '_selectedItemChanged(selectedItem)'
+      ],
+
       attached: function() {
         // NOTE(cdata): Due to timing, a preselected value in a `IronSelectable`
         // child will cause an `iron-select` event to fire while the element is
         // still in a `DocumentFragment`. This has the effect of causing
         // handlers not to fire. So, we double check this value on attached:
         var contentElement = this.contentElement;
         if (contentElement && contentElement.selectedItem) {
           this._setSelectedItem(contentElement.selectedItem);
         }
       },
@@ skipping 22 matching lines @@
       /**
        * A handler that is called when `iron-select` is fired.
        *
        * @param {CustomEvent} event An `iron-select` event.
        */
       _onIronSelect: function(event) {
         this._setSelectedItem(event.detail.item);
       },
 
       /**
+       * A handler that is called when `iron-deselect` is fired.
+       *
+       * @param {CustomEvent} event An `iron-deselect` event.
+       */
+      _onIronDeselect: function(event) {
+        this._setSelectedItem(null);
+      },
+
+      /**
        * A handler that is called when the dropdown is tapped.
        *
        * @param {CustomEvent} event A tap event.
        */
       _onTap: function(event) {
         if (Polymer.Gestures.findOriginalTarget(event) === this) {
           this.open();
         }
       },
 
       /**
        * Compute the label for the dropdown given a selected item.
        *
        * @param {Element} selectedItem A selected Element item, with an
        * optional `label` property.
        */
-      _computeSelectedItemLabel: function(selectedItem) {
+      _selectedItemChanged: function(selectedItem) {
+        var value = '';
         if (!selectedItem) {
-          return '';
+          value = '';
+        } else {
+          value = selectedItem.label || selectedItem.textContent.trim();
         }
 
-        return selectedItem.label || selectedItem.textContent.trim();
+        this._setValue(value);
+        this._setSelectedItemLabel(value);
       },
 
       /**
        * Compute the vertical offset of the menu based on the value of
        * `noLabelFloat`.
        *
        * @param {boolean} noLabelFloat True if the label should not float
        * above the input, otherwise false.
        */
       _computeMenuVerticalOffset: function(noLabelFloat) {
         // NOTE(cdata): These numbers are somewhat magical because they are
         // derived from the metrics of elements internal to `paper-input`'s
         // template. The metrics will change depending on whether or not the
         // input has a floating label.
-        return noLabelFloat ? -4 : 16;
+        return noLabelFloat ? -4 : 8;
+      },
+
+      /**
+       * Returns false if the element is required and does not have a selection,
+       * and true otherwise.
+       * @return {Boolean} true if `required` is false, or if `required` is true
+       * and the element has a valid selection.
+       */
+      _getValidity: function() {
+        return this.disabled || !this.required || (this.required && this.value);
       }
     });
   })();
 </script>
-