feat(setFormValue): Add support for FormData to allow settings multiple form values

* feature(setFormValue): Added support to set FormData to allow settings multiple form values

* fix(setFormValue): make sure FormData values are of string type, File and other Blob-like objects are not supported at the moment

* fix(setFormValue): added support for multi-value keys and skip form elements without a name

* fix(types): Added missing anchor argument to IElementInternals.setValidity interface

Author: lideen

Diff for: src/element-internals.ts

@@ -9,7 +9,7 @@ import {
   hiddenInputMap
 } from './maps';
 import { initAom } from './aom';
-import { getHostRoot, initRef, initLabels, initForm, findParentForm } from './utils';
+import { getHostRoot, initRef, initLabels, initForm, findParentForm, createHiddenInput, removeHiddenInputs } from './utils';
 import { ValidityState, reconcileValidty, setValid } from './ValidityState';
 import { observerCallback, observerConfig } from './mutation-observers';
 import { IElementInternals, ICustomElement, LabelsList } from './types';
@@ -117,15 +117,26 @@ export class ElementInternals implements IElementInternals {
   }
 
   /** Sets the element's value within the form */
-  setFormValue(value: string): void {
-    const hiddenInput = hiddenInputMap.get(this);
-    if (hiddenInput) {
-      hiddenInput.value = value;
-    }
-    if (!this.form) {
+  setFormValue(value: string | FormData): void {
+    const ref = refMap.get(this);
+    if (!this.form || !ref.constructor['formAssociated']) {
       return undefined;
     }
-    const ref = refMap.get(this);
+    removeHiddenInputs(this);
+    if (typeof value === 'string') {
+      if (ref.getAttribute('name')) {
+        const hiddenInput = createHiddenInput(ref, this);
+        hiddenInput.value = value;
+      }
+    } else if (value != null) {
+      value.forEach((formDataValue, formDataKey) => {
+        if (typeof formDataValue === 'string') {
+          const hiddenInput = createHiddenInput(ref, this);
+          hiddenInput.name = formDataKey;
+          hiddenInput.value = formDataValue;
+        }
+      });
+    }
     refValueMap.set(ref, value);
   }
 
@@ -226,7 +237,19 @@ if (!window.ElementInternals) {
         refs.forEach(ref => {
           if (ref.getAttribute('name')) {
             const value = refValueMap.get(ref);
-            data.set(ref.getAttribute('name'), value);
+            if (typeof value === 'string') {
+              data.set(ref.getAttribute('name'), value);
+            } else if (value != null) {
+              const keysAdded = [];
+              value.forEach((formDataValue, formDataKey) => {
+                if (keysAdded.includes(formDataKey)) {
+                  data.append(formDataKey, formDataValue);
+                } else {
+                  data.set(formDataKey, formDataValue);
+                  keysAdded.push(formDataKey);
+                }
+              })
+            }
           }
         });
       }

Diff for: src/maps.ts

@@ -12,7 +12,7 @@ export const refMap = new WeakMap<IElementInternals, ICustomElement>();
 export const validityMap = new WeakMap<IElementInternals, ValidityState>();
 
 /** Use an ElementInternals instance to get its attached input[type="hidden"] */
-export const hiddenInputMap = new WeakMap<IElementInternals, HTMLInputElement>();
+export const hiddenInputMap = new WeakMap<IElementInternals, HTMLInputElement[]>();
 
 /** Use a custom element to get its attached ElementInternals instance */
 export const internalsMap = new WeakMap<ICustomElement, IElementInternals>();

Diff for: src/mutation-observers.ts

@@ -1,6 +1,6 @@
 import { internalsMap, shadowHostsMap, upgradeMap, hiddenInputMap } from './maps.js';
 import { aom } from './aom.js';
-import { initForm, initLabels } from './utils.js';
+import { removeHiddenInputs, initForm, initLabels } from './utils.js';
 import { ICustomElement } from './types.js';
 
 export function observerCallback(mutationList) {
@@ -36,7 +36,7 @@ export function observerCallback(mutationList) {
       const internals = internalsMap.get(node);
       /** Clean up any hidden input elements left after an element is disconnected */
       if (internals && hiddenInputMap.get(internals)) {
-        hiddenInputMap.get(internals).remove();
+        removeHiddenInputs(internals);
       }
       /** Disconnect any unneeded MutationObservers */
       if (shadowHostsMap.has(node)) {

Diff for: src/types.ts

@@ -42,8 +42,8 @@ export interface IElementInternals extends IAom {
   form: HTMLFormElement;
   labels: NodeListOf<HTMLLabelElement>|[];
   reportValidity: () => boolean;
-  setFormValue: (value: string) => void;
-  setValidity: (validityChanges: Partial<globalThis.ValidityState>, validationMessage?: string) => void;
+  setFormValue: (value: string | FormData) => void;
+  setValidity: (validityChanges: Partial<globalThis.ValidityState>, validationMessage?: string, anchor?: HTMLElement) => void;
   validationMessage: string;
   validity: globalThis.ValidityState;
   willValidate: boolean;

Diff for: src/utils.ts

@@ -28,6 +28,34 @@ export const getHostRoot = (node: Node): Node&ParentNode => {
   return parent;
 };
 
+/**
+ * Removes all hidden inputs for the given element internals instance
+ * @param {IElementInternals} internals - The element internals instance
+ * @return {void}
+ */
+export const removeHiddenInputs = (internals: IElementInternals): void => {
+  const hiddenInputs = hiddenInputMap.get(internals);
+  hiddenInputs.forEach(hiddenInput => {
+    hiddenInput.remove();
+  });
+  hiddenInputMap.set(internals, []);
+}
+
+/**
+ * Creates a hidden input for the given ref
+ * @param {ICustomElement} ref - The element to watch
+ * @param {IElementInternals} internals - The element internals instance for the ref
+ * @return {HTMLInputElement} The hidden input
+ */
+export const createHiddenInput = (ref: ICustomElement, internals: IElementInternals): HTMLInputElement | null => {
+  const input = document.createElement('input');
+  input.type = 'hidden';
+  input.name = ref.getAttribute('name');
+  ref.after(input);
+  hiddenInputMap.get(internals).push(input);
+  return input;
+}
+
 /**
  * Initialize a ref by setting up an attribute observe on it
  * looking for changes to disabled
@@ -36,13 +64,7 @@ export const getHostRoot = (node: Node): Node&ParentNode => {
  * @return {void}
  */
 export const initRef = (ref: ICustomElement, internals: IElementInternals): void => {
-  if (ref.constructor['formAssociated']) {
-    const input = document.createElement('input');
-    input.type = 'hidden';
-    input.name = ref.getAttribute('name');
-    ref.after(input);
-    hiddenInputMap.set(internals, input);
-  }
+  hiddenInputMap.set(internals, []);
   observer.observe(ref, observerConfig);
 };
 

Diff for: test/ElementInternals.test.js

@@ -130,19 +130,21 @@ describe('The ElementInternals polyfill', () => {
   });
 
   describe('inside a custom element with a form', () => {
-    let form, el, label, button, internals;
+    let form, el, noname, label, button, internals;
 
     beforeEach(async () => {
       form = await fixture(html`
         <form id="form">
           <label for="foo">Label text</label>
           <test-el name="foo" id="foo"></test-el>
+          <test-el id="noname"></test-el>
           <button type="submit">Submit</button>
         </form>
       `);
       callCount = 0;
       label = form.querySelector('label');
-      el = form.querySelector('test-el');
+      el = form.querySelector('test-el[id=foo]');
+      noname = form.querySelector('test-el[id=noname]');
       button = form.querySelector('button');
       internals = el.internals;
     });
@@ -254,7 +256,7 @@ describe('The ElementInternals polyfill', () => {
       // Lifecycle methods are stripped off at definition time
       // and added elsewhere so we can't use a spy. Instead
       // we're going to look for a side-effect
-      expect(callCount).to.equal(1);
+      expect(callCount).to.equal(2);
     });
 
     it('will cancel form submission if invalid', (done) => {
@@ -286,5 +288,54 @@ describe('The ElementInternals polyfill', () => {
     it('will call formAssociatedCallback after internals have been set', () => {
       expect(internalsAvailableInFormAssociatedCallback).to.be.true;
     })
+
+    it('will not include null values set via setFormValue', () => {
+      internals.setFormValue('test');
+      internals.setFormValue(null);
+      const output = new FormData(form);
+      expect(Array.from(output.keys()).length).to.equal(0);
+    })
+
+    it('will not include undefined values set via setFormValue', () => {
+      internals.setFormValue('test');
+      internals.setFormValue(undefined);
+      const output = new FormData(form);
+      expect(Array.from(output.keys()).length).to.equal(0);
+    })
+
+    it('will include multiple form values passed via FormData to setFormValue', () => {
+      let input;
+      let output;
+      input = new FormData();
+      input.set('first', '1');
+      input.set('second', '2');
+      input.append('second', '22'); // Multi-value keys should also work
+      internals.setFormValue(input);
+      output = new FormData(form);
+      expect(Array.from(output.values()).length).to.equal(3);
+      expect(output.get('first')).to.equal('1');
+      expect(output.getAll('second').length).to.equal(2);
+      input = new FormData();
+      input.set('override', '3');
+      internals.setFormValue(input);
+      output = new FormData(form);
+      expect(Array.from(output.keys()).length).to.equal(1);
+      expect(output.get('override')).to.equal('3');
+    })
+
+    it('will not include form values from elements without a name', () => {
+      noname.internals.setFormValue('noop');
+      const output = new FormData(form);
+      expect(Array.from(output.keys()).length).to.equal(0);
+    })
+
+    it('will include form values from elements without a name if set with FormData', () => {
+      const formData = new FormData();
+      formData.set('formdata', 'works');
+      noname.internals.setFormValue(formData);
+      const output = new FormData(form);
+      expect(Array.from(output.keys()).length).to.equal(1);
+      expect(output.get('formdata')).to.equal('works');
+    })
   });
 });