diff --git a/paper-dropdown-menu.html b/paper-dropdown-menu.html index d34221d..18b23d2 100644 --- a/paper-dropdown-menu.html +++ b/paper-dropdown-menu.html @@ -31,6 +31,10 @@ item is displayed in the control. If no item is selected, the `label` is displayed instead. +Selected items can specify a `value` attribute, which will be assigned to the +`paper-dropdown-menu`'s' own `value` (just like it happens in native select forms). + + Example: @@ -42,7 +46,16 @@ -This example renders a dropdown menu with 4 options. +Or, specifiing values, especially useful in forms: + + + + United Kingdom + United states of America + Italy + Spain + + The child element with the class `dropdown-content` is used as the dropdown menu. This can be a [`paper-listbox`](paper-listbox), or any other or @@ -70,7 +83,7 @@ `--paper-dropdown-menu-input` | A mixin that is applied to the internal paper input | `{}` `--paper-dropdown-menu-icon` | A mixin that is applied to the internal icon | `{}` -You can also use any of the `paper-input-container` and `paper-menu-button` +You ca/n also use any of the `paper-input-container` and `paper-menu-button` style mixins and custom properties to style the internal input and menu button respectively. @@ -160,8 +173,9 @@ /** * 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`. + * a form. It is read only, and will be equal to the 'value' attribute + * of the selected item, or (as a fallback) will be the same as + * `selectedItemLabel`. */ value: { type: String, @@ -339,21 +353,37 @@ }, /** - * Compute the label for the dropdown given a selected item. + * Compute the value and the label for the dropdown given a selected item. + * The selected item's `value` (if available) is used as the dropdown + * menu's own value. As a fallback, the label is used. * * @param {Element} selectedItem A selected Element item, with an * optional `label` property. */ _selectedItemChanged: function(selectedItem) { var value = ''; - if (!selectedItem) { - value = ''; - } else { - value = selectedItem.label || selectedItem.getAttribute('label') || selectedItem.textContent.trim(); + var labelValue = ''; + if (selectedItem) { + + // It will return a value only if parameter is either truly or '' + // It actually returns an object containing the passed value or null, + // so that chained || will work. + function t( p ){ if( p || p === '' ) return { v: p }; }; + + // Value will be either the `value` attribute, or the `value` + // property, or (no choice left) the `labelValue` + // NOTE: t() is used so that '' is considered truly + value = t( selectedItem.getAttribute('value') ) || t( selectedItem.value ) || t( selectedItem.label) || t( selectedItem.getAttribute('label') ) || t( selectedItem.textContent.trim() ); + value = value.v; + + // Label follows the same rules as above, minus the 'value' prop/att + // NOTE: t() is used so that '' is considered truly + labelValue = t( selectedItem.label ) || t( selectedItem.getAttribute('label') ) || t( selectedItem.textContent.trim() ); + labelValue = labelValue.v; } - this._setValue(value); - this._setSelectedItemLabel(value); + this._setSelectedItemLabel(labelValue); + this.fire('change'); }, /**