Skip to content
This repository has been archived by the owner on Dec 19, 2024. It is now read-only.

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

Conversation

mercmobily
Copy link

At the moment, if you have a dropdown menu like this:

        <paper-dropdown-menu name="country" id="country" label="Your country">
          <paper-listbox attr-for-selected="choice" selected="[[countryDefault]]" class="dropdown-content">
            <paper-item choice="it">Italy</paper-item>
            <paper-item choice="fr">France</paper-item>
            <paper-item choice="">Other</paper-item>
          </paper-listbox>
        </paper-dropdown-menu>

After submitting, the server will receive "Italy", "France" or "". There is no way, at the moment, for it to behave like a native select box:

<select>
  <option value="it">Italy</option>
  <option value="fr">France</option>
  <option value="">Other</option>

The only option to send the right data to the server is by setting the "label" attribute for the various elements. However, this has the side effect that after making the selection, the user will see "it", "fr" etc.

This patch addresses that: if value is set for the selected item, THAT is the value considered and assigned to the paper-dropdown-menu.

I wouldn't have tortured you with a PR if I had found a way to do this in other ways... sorry!

At the moment, if you have a dropdown menu like this:

            <paper-dropdown-menu name="country" id="country" label="Your country">
              <paper-listbox attr-for-selected="choice" selected="[[countryDefault]]" class="dropdown-content">
                <paper-item choice="it">Italy</paper-item>
                <paper-item choice="fr">France</paper-item>
                <paper-item choice="">Other</paper-item>
              </paper-listbox>
            </paper-dropdown-menu>

After submitting, the server will receive "Italy", "France" or "". There is no way, at the moment, for it to behave like a native select box:

    <select>
      <option value="it">Italy</option>
      <option value="fr">France</option>
      <option value="">Other</option>
  </select>

The only option to send the right data to the server is by setting the "label" attribute for the various <paper-items> elements. However, this has the side effect that after making the selection, the user will see "it", "fr" etc.

This patch addresses that: if `value` is set for the selected item, THAT is the value considered and assigned to the paper-dropdown-menu.

I wouldn't have tortured you with a PR if I had found a way to do this in other ways... sorry!
@mercmobily
Copy link
Author

Just so that you know how desperate I am for this patch, this is what I am in my main app :D

  ready: function(){

    /* MONKEY PATCH paper-dropdown-menu, IMPLEMENTS:
     * https://github.com/PolymerElements/paper-dropdown-menu/pull/195
     */
    var e = document.createElement('paper-dropdown-menu');
    var p = Object.getPrototypeOf( e );

    p._selectedItemChanged = function(selectedItem) {
      var value = '';
      var labelValue = '';
      if (selectedItem) {
        value = selectedItem.getAttribute('value') || selectedItem.label || selectedItem.getAttribute('label') || selectedItem.textContent.trim();
        labelValue = selectedItem.label || selectedItem.getAttribute('label') || selectedItem.textContent.trim();
      }
      this._setValue(value);
      this._setSelectedItemLabel(labelValue);
    };

  },

@mercmobily mercmobily changed the title Add option to set a specific value sent to the server for each option Add option to set a specific value sent to the server for each option AND fire 'change' Sep 21, 2016
@mercmobily
Copy link
Author

I just broadened the scope of this PR a little.
Since this IS an element that is meant to be used in forms, it should fire up "change" when it's changed. I am writing an application where I monitor 'change' events, and while paper-input does it (well, it proxies the native "change" event), paper-dropdown-menu fails.

I noticed that 4 tests fail with this latest change. Maybe it's me doing something stupid; I can't figure out why they would though.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants