iron-form sends pairs of name-value concatenated in a single string

[adriangaro]

Description

'iron-form' seems to send the values concatenated with ', ' in between for multiple name-value pairs

Expected outcome

'iron-form' should send and array of values not an array with a single value of all values concatenated

Actual outcome

'iron-form' seems to send the values concatenated with ', ' in between for multiple name-value pairs
normally a form with multiple pairs name-value at least for checkboxes posts an array of values, not the values concatenated

Live Demo

Example: https://jsbin.com/xejowanutu/edit?html,output

Steps to reproduce

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

[adriangaro]

Managed to monkey patch it this way, maybe it's helpful, it appears the issue exists only when using auto redirect.

const IronForm = window.customElements.get("iron-form");

IronForm.prototype._createHiddenElement = function(name, value) {
    if(value instanceof Array)
        return value.map((e) => {
            const input = document.createElement('input');
            input.setAttribute('type', 'hidden');
            input.setAttribute('name', name);
            input.setAttribute('value', e);
            return input
        });
    else {
        const input = document.createElement('input');
        input.setAttribute('type', 'hidden');
        input.setAttribute('name', name);
        input.setAttribute('value', value);
        return [input];
    }

};

IronForm.prototype.submit = function(event) {
    // We are not using this form for submission, so always cancel its event.
    if (event) {
      event.preventDefault();
    }

    // If you've called this before distribution happened, bail out.
    if (!this._form) {
      return;
    }

    if (!this.validate()) {
      this.fire('iron-form-invalid');
      return;
    }

    // Remove any existing children in the submission form (from a previous
    // submit).
    this.$.helper.textContent = '';

    const json = this.serializeForm();

    // If we want a redirect, submit the form natively.
    if (this.allowRedirect) {
      // If we're submitting the form natively, then create a hidden element for
      // each of the values.
      for (const element in json) {
          if(json.hasOwnProperty(element))
            this._createHiddenElement(element, json[element]).forEach((e) => {
                this.$.helper.appendChild(e);
            })

      }

      // Copy the original form attributes.
      this.$.helper.action = this._form.getAttribute('action');
      this.$.helper.method = this._form.getAttribute('method') || 'GET';
      this.$.helper.contentType = this._form.getAttribute('enctype') ||
          'application/x-www-form-urlencoded';

      this.$.helper.submit();
      this.fire('iron-form-submit');
    } else {
      this._makeAjaxRequest(json);
    }
};