fix: polyfill accepts non-string values like Chrome

Author: calebdwilliams

Diff for: src/element-internals.ts

@@ -135,12 +135,12 @@ export class ElementInternals implements IElementInternals {
       return undefined;
     }
     removeHiddenInputs(this);
-    if (typeof value === 'string') {
+    if (value && !(value instanceof FormData)) {
       if (ref.getAttribute('name')) {
         const hiddenInput = createHiddenInput(ref, this);
         hiddenInput.value = value;
       }
-    } else if (value != null) {
+    } else if (value && value instanceof FormData) {
       value.forEach((formDataValue, formDataKey) => {
         if (typeof formDataValue === 'string') {
           const hiddenInput = createHiddenInput(ref, this);

Diff for: static/index.html

@@ -15,6 +15,8 @@
       <label for="some-input">Some input</label>
       <input id="some-input" type="text" name="some-input" required minlength="3">
 
+      <x-array name="selected"></x-array>
+      <x-address></x-address>
       <div class="buttons">
         <button type="reset">Reset</button>
         <button type="submit">Submit</button>

Diff for: static/scripts/page.js

@@ -1,8 +1,11 @@
+import 'https://cdn.skypack.dev/construct-style-sheets-polyfill';
+import './x-array.js';
+import './address.js';
+
 const form = document.getElementById('form');
 
 form.addEventListener('submit', event => {
-  console.log(event);
-  // event.preventDefault();
+  event.preventDefault();
 
   const formData = new FormData(event.target);
   const formValue = {};

Diff for: static/scripts/x-array.js

@@ -0,0 +1,19 @@
+class XArray extends HTMLElement {
+  static get formAssociated() {
+    return true;
+  }
+
+  internals = this.attachInternals();
+
+  connectedCallback() {
+    console.log(this.internals);
+    this.internals.setFormValue({a:1,b:2});
+
+    console.log(this.getAttribute('name'),
+      new FormData(this.internals.form)
+        .get(this.getAttribute('name'))
+    )
+  }
+}
+
+customElements.define('x-array', XArray);

Diff for: test/ElementInternals.test.js

@@ -292,21 +292,21 @@ 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;
@@ -326,13 +326,13 @@ describe('The ElementInternals polyfill', () => {
       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();
@@ -354,6 +354,13 @@ describe('The ElementInternals polyfill', () => {
       internals.reportValidity();
       expect(document.activeElement).to.equal(el);
     });
+
+    if('will accept non strings', async () => {
+      internals.setFormValue(['a', 'b']);
+      expect(
+        new FormData(internals.form).get('foo')
+      ).to.equal('a,b');
+    });
   });
 
   describe('closed shadow root element', () => {