search

PolymerElements / paper-dropdown-menu

A Material Design browser select element
https://www.webcomponents.org/element/PolymerElements/paper-dropdown-menu
61 stars 107 forks source link

Need a .value property which reports actual value, not its label #138

Open Typel opened 8 years ago

Typel commented 8 years ago

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?

34code commented 8 years ago

:+1: -- @Typel thanks for the thorough description .. i was able to solve a related issue with this

SPAHI4 commented 8 years ago

+1 I think .value must returns selectedItem.value if passed or selectedItem.textContent if not. Similar to native

Typel commented 8 years ago

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?

mercmobily commented 7 years ago

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.