form: asynchronous ElementInternals form data synchronization

[pdesoyres-cc]

Let say you have a <cc-select> inside a <form> and you want to submit the form immediately after the selection changes:

_onTypeChange(e) {
	this._filterFormRef.value.requestSubmit();
}

_onFormSubmit(e) {
	const formData = new FormData(e.target);
	console.log(formData.type);
}

render () {
	return html`
		<form ${ref(this._filterFormRef)} ${formSubmit(this._onFormSubmit)}>
			<cc-select name="type" @cc-select:input=${this._onTypeChange}></cc-select>
		</form>
    `;

In the above code, the formData.type logged to the console is not the one that has just been selected. It is the one prior the new selection.

This is because, the ElementInternals form data synchronization is done asynchronously: in the updated stage of the Lit component lifecycle. (see the implementation of the updated method of cc-form-control-element.abstract.js).

So, to make this work, we need to write:

async _onTypeChange(e) {
    await this.updateComplete;
	this._filterFormRef.value.requestSubmit();
}

And this is not very developer friendly!

• Could we find a way to do the ElementInternals form data synchronization synchronously?
  • this implies that each form control component may need to change their internal value AND also ask for form data synchronization. (which is not very developer friendly neither)
• Should we make sure we always wait for the next render before handling the form submission?
  • we could wait for next render inside the form-submit-handler.js (or maybe in the form-submit-directive.js).
  • At these points we do not have a reference to the component that we should wait for render, so we could,
    • try to find the first LitElement in the ascendants
    • just use a setTimeout(fn, 0).
• If we cannot find a good solution, we should at least document this somewhere.