Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add option to set a specific value sent to the server for each option AND fire 'change' #195

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Add option to set a specific value sent to the server for each option AND fire 'change' #195

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f684663
Add option to set a specific value sent to the server for each option
mercmobily Aug 28, 2016
7280cd5
Added documentation, and fixed the code slightly
mercmobily Aug 31, 2016
95411be
Fixed the logix, since '' is falsy in JS but '' (empty str) should be…
mercmobily Aug 31, 2016
e559c12
Since this is an input element, it should fire 'change' when it's cha…
mercmobily Sep 21, 2016
d725f0e
Fixed that 'if', made sure it's back-compatible with the 'old' way. T…
mercmobily Sep 21, 2016
26874e9
Changed logic so that '' is considered truly using small wrapping fun…
mercmobily Sep 21, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 41 additions & 11 deletions paper-dropdown-menu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:

<paper-dropdown-menu label="Your favourite pastry">
Expand All @@ -42,7 +46,16 @@
</paper-listbox>
</paper-dropdown-menu>

This example renders a dropdown menu with 4 options.
Or, specifiing values, especially useful in forms:

<paper-dropdown-menu name="country" label="Your country">
<paper-listbox class="dropdown-content">
<paper-item value="UK">United Kingdom</paper-item>
<paper-item value="US">United states of America</paper-item>
<paper-item value="IT">Italy</paper-item>
<paper-item value="ES">Spain</paper-item>
</paper-listbox>
</paper-dropdown-menu>

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
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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');
},

/**
Expand Down