Thank you + missing elements in form object

[geonanorch]

First a big thank you + a star for publishing this polyfill !

While testing it I realized that although using the FormData API works, more traditional form usage such as in the following snippet does not:

class MyTest extends HTMLElement {
  static get formAssociated() { return true; }
  constructor() {
    super();
    this._internals = this.attachInternals();
  }
}
customElements.define("my-element", MyTest);

<form>
     <my-element name="myel"></my-element>
</form>

onSubmit(ev) {
  ev.preventDefault();
  const form = ev.target;
  alert('submit with value: ' + (form.myel && form.myel.value));
}

Like with a regular input element, under Chrome (so polyfill not used) the form object includes form.myel and form[0]. With Firefox (so with polyfill) those entries are missing.

This issue is to request that the polyfill adds those definitions. Possibly a simple change to the polyfill's initForm() method is all it takes, or maybe there is a better way ?

[calebdwilliams]

Good call @geonanorch, I'll add that real quick. FWIW, the custom element itself will be responsible for setting its own value. The ElementInternals feature doesn't sync formAssociatedElementInstance.value with the form value, but it does attach the element to the form in the way you describe. See this pen for a demo of what I'm talking about:

[calebdwilliams]

This should be fixed as part of 0.0.16.

[geonanorch]

Thank you @calebdwilliams , works for me!
It is still not perfect (custom element not accessible as form[n], not listed under form.elements), but there does not seem to be a way to add to HTMLFormControlsCollection...

[calebdwilliams]

Are you saying it is still not accessible under form.inputName?

[geonanorch]

Sorry if I was unclear, form.inputName is fine, form[0] is what is still missing. If the custom element could be added to form.elements, probably that would result in form[0] being populated, but that does not seem to be possible.
So much legacy in this whole HTML business...

[calebdwilliams]

Unfortunately yeah. Although it might be possible to overwrite that getter. I might have to play with that this week.

[BurnedToast]

Just came across the same problem.

The custom elements form values will also not be included in the resulting request data of the form (using action and/or method on the form element). I put up a jsFiddle to show the problem:

jsFiddle

Executed in Chrome, the value of the "custom" field will be submitted - in Firefox it is missing.

Should this be a new issue?

[calebdwilliams]

That's more or less the same issue and, to be honest, I'm not sure there is a great way of doing that outside of using <input type="hidden">. I used to have that as part of this code, but I removed it in favor of using FormData.

[geonanorch]

Sadly I can only confirm what BurnedToast reported: if I use 'action' instead of handling the submit with Javascript, custom elements are not included in Firefox & Co.
Looks like <input type="hidden"> is the only way to ensure backward-compatibility...

[BurnedToast]

So it is not planed to support that input-type-hidden workaround in this polyfill?

Maybe there could be an configuration to activate this feature on demand!? Sounds like you already have all the source code for this.

[calebdwilliams]

I do. I’m considering re-enabling it. Trying to decide if it should it be on demand or should I just drop those inputs in by default and be done with it.

Do you have any preferences?

[geonanorch]

I would suggest configurable/on-demand, and enabled by default.

[BurnedToast]

I think its a main feature of this polyfill. I would welcome it to be enabled by default :)

[BurnedToast]

Is this feature still on the roadmap? Do you need some support for this one?

[calebdwilliams]

I literally added it back in yesterday in version 0.1.0.

[BurnedToast]

Hi, was just able to test the new version. Works great.
Except one use case. When I use setFormValue with a "File" Object.

The spec allows this and will upload the file as attachment.

The good thing is ... i may have a solution for you. You could create a hidden input-field outside the shadow-root with the type="file" so you may need to hide it with the style instead of type="hidden".

That field has the property "files" - containing an own FileList. Sadly you can not add the selected files to that list since it is readonly. And also sadly there is no constructor. But there is a workaround. You can create a new FileList containing the selected File using this code:

// Firefox < 62 workaround exploiting https://bugzilla.mozilla.org/show_bug.cgi?id=1422655
const dT = new ClipboardEvent('').clipboardData || new DataTransfer(); // specs compliant (as of March 2018 only Chrome)
dT.items.add(document.getElementsByName('multiple2')[0].files[0]);
var myFileList = dT.files;

see: https://stackoverflow.com/questions/47119426/how-to-set-file-objects-and-length-property-at-filelist-object-where-the-files-a

With that list you can set the files of the hidden File-Input.

I would be happy to see this in your polyfill and will support you as good as I can :)

[reno1979]

Good call @geonanorch, I'll add that real quick. FWIW, the custom element itself will be responsible for setting its own value. The ElementInternals feature doesn't sync formAssociatedElementInstance.value with the form value, but it does attach the element to the form in the way you describe. See this pen for a demo of what I'm talking about:

The demo fails on Firefox. The elements fail to register to the form when using Firefox.