add an `attrForSelected` attribute

[morficus]

Similar to the attribute available in paper-menu, I am proposing that this elements needs an attribute called attrForSelected

1. Who will use the feature? Developers who, when serializing or submitting a form, wish to use something other than the label of the selected item. 2. When will they use the feature? During development, when something other than selectedItemLabel is desired as the submitted/serialized value. 3. What is the user’s goal? The goal is to provide the ability to specify an alternate attribute on the iron-element to use in place of the default behavior (which is the selectedItemLabel)

Use case (taken from #81)

Using the following markup:

<paper-dropdown-menu label="Your favourite pastry">
  <paper-menu class="dropdown-content" attr-for-selected="value">
    <paper-item value="1">Croissant</paper-item>
    <paper-item value="2">Donut</paper-item>
    <paper-item value="3">Financier</paper-item>
    <paper-item value="4">Madeleine</paper-item>
  </paper-menu>
</paper-dropdown-menu>

When submitting a form that contains paper-dropdown-menu, we would like to submit content of the "value" attribute.

If we were to select the first item in the list, in the current version of paper-dropdown-menu (v1.1.1) paper-dropdown-menu.value would be "Croissant". There is no way to set paper-dropdown-menu.value to 1.

Proposed solution:

<paper-dropdown-menu label="Your favourite pastry" attr-for-selected="value">
  <paper-menu class="dropdown-content" attr-for-selected="value">
    <paper-item value="1">Croissant</paper-item>
    <paper-item value="2">Donut</paper-item>
    <paper-item value="3">Financier</paper-item>
    <paper-item value="4">Madeleine</paper-item>
  </paper-menu>
</paper-dropdown-menu>

Using the proposed attrForSelected would satisfy the above use case

[zmoshansky]

Yes, yes, yes! I was about to do the same and will be using your branch until this lands...

[morficus]

as per @zmoshansky suggestion, in place of duplicating the attrForSelected attribute on the paper-dropdown-menu, it will now try to use the attribute from the containing list item.

So the proposed solution would be used this way:

<paper-dropdown-menu label="Your favourite pastry">
  <paper-menu class="dropdown-content" attr-for-selected="value">
    <paper-item value="1">Croissant</paper-item>
    <paper-item value="2">Donut</paper-item>
    <paper-item value="3">Financier</paper-item>
    <paper-item value="4">Madeleine</paper-item>
  </paper-menu>
</paper-dropdown-menu>

[ksugiarto]

Hi @morficus nice idea, which actually become my research on these days about it. So the idea would be just using attrForSelected on the paper-menu that can be serialize on the iron-form, right?

Absolutely +1 from me. Thanks

[cdata]

This design seems reasonable to me. @notwaldorf do you have any thoughts?

[cdata]

@morficus paper-dropdown-menu looks for a label property on the selected item, so you should also be able to do an arrangement like this:

<paper-dropdown-menu label="Your favourite pastry">
  <paper-menu class="dropdown-content" attr-for-selected="label">
    <paper-item label="1">Croissant</paper-item>
    <paper-item label="2">Donut</paper-item>
    <paper-item label="3">Financier</paper-item>
    <paper-item label="4">Madeleine</paper-item>
  </paper-menu>
</paper-dropdown-menu>

To get the desired result. Does this satisfy your use case?

[miztroh-zz]

@cdata As a point of clarification, paper-item doesn't have a label property. The current release doesn't support using a label attribute.

[btelles]

@cdata, I don't think this is a dupe of #118. Issue 118 is a very common HTML idiom where a user selects an option "My Widget", but the value of the selection (the value the form sees) is "2" or some other value.

To support this very common use case, we currently have to understand paper-dropdown-menu really really well. We have to:

1. create a second hidden element with the intended field name
2. avoid setting the "name" parameter in the paper-dropdown-menu
3. Assign an "attr-for-selected" in paper-dropdown-menu
4. Assign "selected" in paper-dropdown-menu
5. Assign an arbitrary attribute in the paper-item to hold our "hidden" value

I've already talked with Monica about this, and this keeps coming up as an essential missing part of paper-dropdown-menu.

If a property "attr-for-value" were to exist, users would be able to avoid the workaround to get the paper-dropdown to work like a regular select box. If I were to create a PR that adds attr-for-value, would that be reasonble? (trying to avoid doing work that might go unnoticed)

In effect, the following:

    <paper-dropdown-menu label="Hello">
      <paper-menu class="dropdown-content" attr-for-selected="label" selected="{{hiddenValue}}">
        <template is="dom-repeat" items="[[items]]">
          <paper-item label="[[item.hiddenValue]]">[[item.shownValue]]</paper-item>
        </template>
      </paper-menu>
    </paper-dropdown-menu>
    <input is="iron-input" name="my_field" value="[[hiddenValue]]"></input>

would turn into this (which is not the same as an HTML select/option, but is much closer and easier:

    <paper-dropdown-menu label="Hello">
      <paper-menu class="dropdown-content" attr-for-value="label" name="my_field">
        <template is="dom-repeat" items="[[items]]">
          <paper-item label="[[item.hiddenValue]]">[[item.shownValue]]</paper-item>
        </template>
      </paper-menu>
    </paper-dropdown-menu>

[ktiedt]

Just wanted to toss my 2 cents in here... if the element was named paper-dropdown-container (or anything less opinionated than -menu these expectations would likely go away... the -menu name tends to imply some level of API in common with other -menu named elements.

[valdrinkoshi]

@cdata @notwaldorf any update on this?

[profhase]

Isn't it resolved by the fact that you might set the attrForSelected property on paper-listbox inside paper-dropdown-menu?

https://www.webcomponents.org/element/PolymerElements/paper-listbox/elements/paper-listbox

-

[vedtam]

@morficus , @cdata the label property is of no help here. If used for referencing, say for an id or number, after the selection changes the dropdown-menu will reflect the label instead of the paper-item's value.

As a solution I use to bind to the paper-listbox's selected-changed event:

<paper-dropdown-menu label="Select article">
  <paper-listbox slot="dropdown-content" attr-for-selected="post_id" @selected-changed="${(e) => selectedPosts.id = e.detail.value}">
    <paper-item post_id="23">Article about...</paper-item>
  </paper-listbox>
  ...

But it doesn't feel right, paper-dropdown-menu should have a solution for this!