Fix ref switcher not working on Microsoft Edge

Microsoft Edge has a bug in FormData.getAll() that returns an undefined
value for each form element that does not match the given key:
https://github.com/jimmywarting/FormData/issues/80

To work around this issue, we just filter out undefined values.

Closes https://gitlab.com/gitlab-org/gitlab/issues/31373

app/assets/javascripts/lib/utils/forms.js

@@ -4,7 +4,11 @@ export const serializeFormEntries = entries =>
 export const serializeForm = form => {
   const fdata = new FormData(form);
   const entries = Array.from(fdata.keys()).map(key => {
-    const val = fdata.getAll(key);
+    let val = fdata.getAll(key);
+    // Microsoft Edge has a bug in FormData.getAll() that returns an undefined
+    // value for each form element that does not match the given key:
+    // https://github.com/jimmywarting/FormData/issues/80
+    val = val.filter(n => n);
     return { name: key, value: val.length === 1 ? val[0] : val };
   });
 

changelogs/unreleased/sh-workaround-ms-edge-form-bug.yml

+---
+title: Fix ref switcher not working on Microsoft Edge
+merge_request: 19335
+author:
+type: fixed

spec/frontend/lib/utils/forms_spec.js

@@ -70,5 +70,27 @@ describe('lib/utils/forms', () => {
         bar: ['bar-value2', 'bar-value1'],
       });
     });
+
+    it('handles Microsoft Edge FormData.getAll() bug', () => {
+      const formData = [
+        { type: 'checkbox', name: 'foo', value: 'foo-value1' },
+        { type: 'text', name: 'bar', value: 'bar-value2' },
+      ];
+
+      const form = createDummyForm(formData);
+
+      jest
+        .spyOn(FormData.prototype, 'getAll')
+        .mockImplementation(name =>
+          formData.map(elem => (elem.name === name ? elem.value : undefined)),
+        );
+
+      const data = serializeForm(form);
+
+      expect(data).toEqual({
+        foo: 'foo-value1',
+        bar: 'bar-value2',
+      });
+    });
   });
 });