window.URLSearchParams broken on Edge

Question

I'm trying something like the following;

let formUrl = new window.URLSearchParams(
        new window.FormData(this.searchForm)
      ).toString()

But I'm getting '0: Invalid argument'

This works on every browser apart from edge.

Has anyone run into this issue before

Answer 1

The problem in Edge is that they do not support destructuring of FormData object. (for ... of in linked table).

Indeed, you are relying on this behavior from other browsers in your code, because URLSearchParams( init ) constructor accepts a record as init parameter.

The specs read

3. Otherwise, if init is a record, then for each name → value in init, append a new name-value pair whose name is name and value is value, to query’s list.

So this means that your code is actually doing

const formData = new FormData( searchForm );

const urlParams = new URLSearchParams();
for ( let [ name, value ] of formData ) {
  urlParams.append( name, value );
}
let formUrl = urlParams.toString();

console.log( formUrl );

<form id="searchForm">
  <input name="foo" value="bar">
  <input name="baz" value="bla">
</form>

But since, once again, Edge doesn't support destructuring of FormData, your code breaks.

However, according to MDN, they do support for ... of FormData.entries(), so maybe this would work (no Edge to test though so let me know).

let formUrl = new window.URLSearchParams(
  new window.FormData(this.searchForm)
    .entries() // explicitely call .entries() to get the iterator
).toString()

console.log( formUrl );

<form id="searchForm">
  <input name="foo" value="bar">
  <input name="baz" value="bla">
</form>

Answer 2

A nice answer to another question that gives you the right code is here: https://stackoverflow.com/a/44033425/1568714

Basically, do this

new URLSearchParams(Array.from(new FormData(formElement))).toString()

Kaiido's answer explains the problem well, but using that approach you will get issues in iOS safari versions < 10.3 and chrome versions < 53, where .entries is not supported. (https://caniuse.com/#feat=object-entries)