Bug 269832 – setValidity of ElementInternals can't handle missing optional anchor parameter

• Status: NEW
• Component: Forms

Steps to reproduce:

1. Go to https://jsfiddle.net/3js69ngu/3/. You will find a custom web component imitating a checkbox form control.
2. Click on "Submit Form" in the "Custom Checkbox" section


Actual results:

- No validation message appears
- Console error: "An invalid form control is not focusable."

There is the "setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;" method to set the validity state of a custom component using ElementInternals. As per description, the "anchor" parameter, which is used as the anchor to display the validity message, is optional. However, in Firefox, the message is not displayed as long anchor parameter is not provided. The error message "An invalid form control is not focusable." is not true, as the custom form component (see https://jsfiddle.net/3js69ngu/3/) is focusable. Providing the host of the component as parameter is not possible, as the anchor parameter element needs to be inside the shadow DOM.

Definition:
anchor – An HTMLElement which can be used by the user agent to report problems with this form submission.


Expected results:

Not passing an anchor should focus the host and display the message there. Check Chromium, where it is implemented and working like expected.

Related specification discussion: https://github.com/whatwg/html/issues/10155

[Radar WebKit Bug Importer]

<rdar://problem/123744294>

[Lukas Spirig]

Has there been any progress with this?
Firefox has since addressed this: https://bugzilla.mozilla.org/show_bug.cgi?id=1881199