Form-associated custom elements: being a submit button

[domenic]

See discussion starting around #187 (comment).

If you want your FACE to be a submit button, which means:

• Can be selected by :default
• Can be automatically clicked by the implicit submission of other form elements

you currently cannot.

A strawperson proposal would be to add a submitButton boolean to ElementInternals. Then custom submit buttons would just do this.#internals.submitButton = true.

[annevk]

And it would throw if this's form-associated is not true?

Do you have to setup your own activation behavior (by invoking this.#internals.form.requestSubmit(this) presumably)?

[domenic]

And it would throw if this's form-associated is not true?

For sure.

Do you have to setup your own activation behavior (by invoking this.#internals.form.requestSubmit(this) presumably)?

Good question. I had envisioned yes, but I don't have strong feelings. I can't immediately think of any good use cases that would be prevented if we automatically added such activation behavior.

[elycruz]

Shouldn't we just mimmick the way buttons currently work in forms? I.e.: Click any button or an input[type="submit"] element and the form gets submitted?

Also, for bullet point 2: You can call form.submit() // or form.requestSubmit() if you have access to the form via internals no?

Never mind my comments above (just read the comments in issue #187 and now understand what you're mentioning here 👍). (excuse my ignorance)
(thanks)

[Westbrook]

Are there any blockers to this sort of addition or places that the community could specifically support moving this forward?

[calebdwilliams]

I really like the HTMLFormElement.prototype.requestSubmit idea. Would be easy enough to polyfill as well.

[annevk]

I think the main blocker is having someone willing to work out the details. I.e., a more concrete form of OP that can be turned into a PR against the HTML Standard. And then have someone write web-platform-tests to accompany that.

[calebdwilliams]

So I've been playing with this in my project at work and this seems like it mimics what I'd like to see on this front:

HTMLFormElement.prototype.requestSubmit = function() {
  if (this.reportValidity() === false) {
    return;
  }
  const submitEvent = new Event('submit', { cancelable: true });
  this.dispatchEvent(submitEvent);
  if (!submitEvent.defaultPrevented) {
    this.submit();
  }
}

While this could live on ElementInternals, it doesn't quite make sense to make it ElementInternals.prototype.submitForm because form is already exposed by ElementInternals and other APIs might wish to make use of this API as well (other than submit buttons) like watching for an Enter keydown event:

class SomeCustomElement extends HTMLElement {
  #internals = this.attachInternals();

  /** Interesting custom element things */

  connectedCallback() {
    this.someTarget.addEventListener('keypress', event => {
      if (this.#internals.form && event.code === 'Enter') {
        this.#internals.form.requestSubmit();
      }
    }
  }
}

Since ElementInternals.prototype.setFormValue will accept a FormData object, this could also enable logical submissions from within nested forms:

<form id="rootForm">
  <x-personal-info-form></x-personal-info-form>
  <x-address-form></x-address-form>
  <x-ds-button-row></x-ds-button-row>
<form>

Where any Enter keypress from x-personal-info-form or x-address-form could submit the form. The x-ds-button-row element could include styled reset and submit buttons. Both of which will work for all the forms.

[domenic]

requestSubmit() already exists and is implemented: https://html.spec.whatwg.org/#dom-form-requestsubmit https://wpt.fyi/results/html/semantics/forms/the-form-element/form-requestsubmit.html?label=master&label=experimental&aligned&q=requestsubmit

[calebdwilliams]

Welp, learn something new every day. Thanks for the link.