paper-dropdown-menu
paper-dropdown-menu copied to clipboard
Need a .value property which reports actual value, not its label
value property is misleading as it does not report the value of the selected paper-item, but rather its innerHTML (label).
In this scenario:
<paper-dropdown-menu id="test">
<paper-menu class="dropdown-content">
<paper-item value="selectedItemValue">selectedItemLabel</paper-item>
</paper-menu>
</paper-dropdown-menu>
Using this:
document.querySelector('#test').value
Returns:
selectedItemLabel
Given its name, I would have expected the .value property to report the selected paper-item's value (selectedItemValue in the example) rather than its label. It is documented as such, so I assume this is an intentional decision, but shouldn't there be a similar readonly property which actually looks up its value as well? Might I suggest selectedItemValue?
:+1: -- @Typel thanks for the thorough description .. i was able to solve a related issue with this
+1 I think .value must returns selectedItem.value if passed or selectedItem.textContent if not. Similar to native
Under current specs, I don't see that there is any way to retrieve the selected value at all - only its label. Does anybody know of a workaround?
This is a pending PR for this, but it hasn't been checked yet and it may never be accepted or it may be changed in the meantime.
For my own app, I am currently monkey-patching it... https://github.com/PolymerElements/paper-dropdown-menu/pull/195
If you do go for the money-patching way, make sure you use the snippet in the PR, since it's the latest incarnation.