feat(remove hidden input): work to remove hidden input

Author: calebdwilliams

Diff for: src/element-internals.js

@@ -4,7 +4,9 @@ import {
   internalsMap,
   hiddenInputMap,
   validationMessageMap,
-  shadowHostsMap
+  shadowHostsMap,
+  formElementsMap,
+  refValueMap
 } from './maps.js';
 import { getHostRoot, initRef, initLabels, initForm, findParentForm } from './utils.js';
 import { ValidityState, reconcileValidty, setValid } from './ValidityState.js';
@@ -63,8 +65,10 @@ class ElementInternals {
     if (!this.form) {
       return undefined;
     }
-    const hiddenInput = hiddenInputMap.get(this);
-    hiddenInput.value = value;
+    // const hiddenInput = hiddenInputMap.get(this);
+    const ref = refMap.get(this);
+    refValueMap.set(ref, value);
+    // hiddenInput.value = value;
   }
 
   setValidity(validityChanges, validationMessage) {
@@ -134,4 +138,21 @@ if (!window.ElementInternals) {
 
   const documentObserver = new MutationObserver(observerCallback);
   documentObserver.observe(document.body, observerConfig);
+
+  class FormData extends window.FormData {
+    constructor(form) {
+      super(form);
+      if (form && formElementsMap.has(form)) {
+        const refs = formElementsMap.get(form);
+        refs.forEach(ref => {
+          if (ref.getAttribute('name')) {
+            const value = refValueMap.get(ref);
+            this.set(ref.getAttribute('name'), value);
+          }
+        });
+      }
+    }
+  }
+
+  window.FormData = FormData;
 }

Diff for: src/maps.js

@@ -6,3 +6,7 @@ export const validationMessageMap = new WeakMap();
 export const formsMap = new WeakMap();
 export const observedShadowRootsMap = new WeakMap();
 export const shadowHostsMap = new WeakMap();
+/** @type WeakMap<HTMLFormElement, Set<HTMLElement>> */
+export const formElementsMap = new WeakMap();
+/** @type WeakMap<HTMLElement, any> */
+export const refValueMap = new WeakMap();

Diff for: src/mutation-observers.js

@@ -1,4 +1,5 @@
 import { internalsMap, shadowHostsMap } from './maps.js';
+import { initForm } from './utils.js';
 
 export function observerCallback(mutationList) {
   mutationList.forEach(mutationRecord => {
@@ -8,9 +9,7 @@ export function observerCallback(mutationList) {
         const internals = internalsMap.get(node);
         const { form } = internals;
 
-        if (form && node.formAssociatedCallback) {
-          node.formAssociatedCallback.apply(node, [form]);
-        }
+        initForm(node, form, internals);
       }
     });
 

Diff for: src/utils.js

@@ -1,4 +1,4 @@
-import { hiddenInputMap, formsMap } from './maps.js';
+import { hiddenInputMap, formsMap, formElementsMap } from './maps.js';
 
 const observerConfig = { attributes: true };
 
@@ -46,6 +46,7 @@ export const initLabels = (ref, labels) => {
 
 export const initForm = (ref, form, internals) => {
   if (form) {
+    // TODO: check all form elements instead of just this
     form.addEventListener('submit', event => {
       if (internals.checkValidity() === false) {
         event.stopImmediatePropagation();
@@ -60,8 +61,16 @@ export const initForm = (ref, form, internals) => {
       }
     });
 
+    const formElements = formElementsMap.get(form);
     formsMap.set(form, { ref, internals });
 
+    if (formElements) {
+      formElements.add(ref);
+    } else {
+      const initSet = new Set();
+      initSet.add(ref);
+      formElementsMap.set(form, initSet);
+    }
     if (ref.formAssociatedCallback) {
       ref.formAssociatedCallback.apply(ref, [form]);
     }