1881199 - setValidity of ElementInternals can't handle missing optional anchor parameter

Status: VERIFIED FIXED

(Core :: DOM: Forms, defect, P2)

Description

[jeremias.peier]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

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.

Comment 1

[Edgar Chen [:edgar]]

It is not clear how constraint validation works for FACE if the 'validation anchor' is null, I filed https://github.com/whatwg/html/issues/10155.
It looks like Blink fallback the FACE itself when the 'validation anchor' is null, it looks reasonable to me.

Comment 2

[Edgar Chen [:edgar]]

Attachment: Bug 1881199 - Use FACE itself to show invalid popup when the validation anchor is null; r?smaug

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d43385ab0a23
Use FACE itself to show invalid popup when the validation anchor is null; r=smaug

Comment 4

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/d43385ab0a23

Comment 5

[Alexandru Trif, Desktop Test Engineering [:atrif]]

Reproduced the issue with Firefox 125.0a1 (2024-02-20) on Windows 10x64. Nothing is happening after clicking the Submit form button from the attached test case from comment 0.
The issue is verified fixed with Firefox 125.0b5 on Windows 10x64, macOS 12 and Ubuntu 23.10. A pop-up message is displayed saying Should be ticked message when clicking the Submit form button.