1991743 - Inherit "form" attribute into moz- input elements when set

Status: RESOLVED FIXED

(Toolkit :: UI Widgets, enhancement)

Description

[:Gijs (he/him)]

Folks want to use moz-checkbox and moz-radio-group and such with HTML <form> elements and sometimes that requires using a form attribute (if the input isn't a descendant of the relevant form element). But the attribute needs to be on the actual <input> and so the custom element should ideally forward the one set on the custom element to the nested <input>.

Comment 1

[:Gijs (he/him)]

See https://phabricator.services.mozilla.com/D265895#inline-1456964 where I originally tried to suggest we use moz-checkbox, only we can't...

Comment 2

[Tim Giles [:tgiles]]

I'm hoping this is as straightforward as adding the static formAssociated = true; to the various base input elements we have. If not, I'll write up my findings so we can figure out how to best solve this.

Comment 3

[Tim Giles [:tgiles]]

Attachment: Bug 1991743 - Allow moz-input elements to be used in forms. r=#recomp-reviewers

By utilizing the static formAssociated property, we allow elements
that extend the MozBaseInputElement to work as expected when used in
form elements. Since we are changing the base input element to be a
form-associated element, we have to implement some additional functions
that are common to form elements. These are the form() getter, the
public setFormValue method, and the public formResetCallback method.

The setFormValue is a public method because we need subclasses of the
base input element to be able to modify the private internals of the
base input class.

Comment 4

[Tim Giles [:tgiles]]

Attachment: Bug 1991743 - Allow moz-checkbox to work in a form. r=#recomp-reviewers

We need to override the public setFormValue and formResetCallback
methods of the base input element for moz-checkbox to behave as expected
in forms.

Comment 5

[Tim Giles [:tgiles]]

Attachment: Bug 1991743 - Add form behavior for SelectControl. r=#recomp-reviewers

In order for moz-radio-group to behave correctly when used in a form, we
needed to add the formAssociated property to the SelectControl class
and implement setFormValue and formResetCallback.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/6cc653bf5158
https://hg.mozilla.org/integration/autoland/rev/0cd563373c78
Allow moz-input elements to be used in forms. r=mkennedy
https://github.com/mozilla-firefox/firefox/commit/a3c1803f345d
https://hg.mozilla.org/integration/autoland/rev/161ad905e960
Allow moz-checkbox to work in a form. r=mkennedy
https://github.com/mozilla-firefox/firefox/commit/1c4cd715aba2
https://hg.mozilla.org/integration/autoland/rev/e2a337f7fcdc
Add form behavior for SelectControl. r=mkennedy

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/19837b0f8aa1
https://hg.mozilla.org/integration/autoland/rev/c88b8be3d2b3
Revert "Bug 1991743 - Add form behavior for SelectControl. r=mkennedy" for causing mochitests failures in test_moz_checkbox.html.

Comment 8

[Serban Stanca [:SerbanS]]

Reverted this because it was causing mochitests failures in test_moz_checkbox.html.

• Revert link
• Push with failures
• Failure Log
• Failure line: TEST-UNEXPECTED-FAIL | toolkit/content/tests/widgets/test_moz_checkbox.html | The nested moz-checkbox element is enabled when the parent input is activated. - got true, expected false

Please also check this failure.

• Failure Log

Comment 9

[Tim Giles [:tgiles]]

Fixed the test failures and queued up a new landing. We'll see if it sticks this time.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/6de07a14b7c2
https://hg.mozilla.org/integration/autoland/rev/991bfd884424
Allow moz-input elements to be used in forms. r=mkennedy
https://github.com/mozilla-firefox/firefox/commit/592bf213da40
https://hg.mozilla.org/integration/autoland/rev/a673acb3100c
Allow moz-checkbox to work in a form. r=mkennedy
https://github.com/mozilla-firefox/firefox/commit/d92adb49f9f3
https://hg.mozilla.org/integration/autoland/rev/4e766b162215
Add form behavior for SelectControl. r=mkennedy

Comment 11

[agoloman]

https://hg.mozilla.org/mozilla-central/rev/991bfd884424
https://hg.mozilla.org/mozilla-central/rev/a673acb3100c
https://hg.mozilla.org/mozilla-central/rev/4e766b162215