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.

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

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 join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants