[BUGFIX] Fix "not focusable" error on mandatory conditional checkbox groups - #129
Open
kitzberger wants to merge 1 commit into
Open
[BUGFIX] Fix "not focusable" error on mandatory conditional checkbox groups#129kitzberger wants to merge 1 commit into
kitzberger wants to merge 1 commit into
Conversation
…groups
In multi-step forms, a mandatory checkbox group (multiple inputs sharing
name="...[]") that is conditionally hidden/shown by powermail_cond triggers
a browser console error on submit when the user checks a non-first
checkbox:
An invalid form control with name='...' is not focusable.
Two bugs in PowermailConditions.js cause this:
1. #getFieldByMarker uses querySelector (singular) and returns only the
first checkbox of a multi-value group. #hideField/#showField therefore
only disable/enable and derequire/rerequire that single checkbox,
leaving the rest untouched.
2. #rerequireField unconditionally restores a native HTML5 "required"
attribute, even when the field originally carried powermail's custom
"data-powermail-required". Powermail uses data-powermail-required (not
native required) for multi-checkbox mandatory fields and handles
"at least one checked" via data-powermail-multiple. The native
"required" added by #rerequireField is then enforced by
reportValidity() on a field inside a display:none fieldset (hidden by
the multi-step navigation), which the browser cannot focus.
Fix:
- #hideField/#showField now iterate querySelectorAll('input, select,
textarea') over the wrapping container so every input in a multi-value
group is disabled/enabled and derequired/rerequired.
- #derequireField/#rerequireField bookmark which required attribute was
present (native "required" vs "data-powermail-required") and restore
the same one, preserving powermail's custom validation for multi-
checkbox groups.
Resolves: in2code-de#128
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
In multi-step forms, a mandatory checkbox group (multiple inputs sharing name="...[]") that is conditionally hidden/shown by powermail_cond triggers a browser console error on submit when the user checks a non-first checkbox:
Two bugs in PowermailConditions.js cause this:
#getFieldByMarker uses querySelector (singular) and returns only the first checkbox of a multi-value group. #hideField/#showField therefore only disable/enable and derequire/rerequire that single checkbox, leaving the rest untouched.
#rerequireField unconditionally restores a native HTML5 "required" attribute, even when the field originally carried powermail's custom "data-powermail-required". Powermail uses data-powermail-required (not native required) for multi-checkbox mandatory fields and handles "at least one checked" via data-powermail-multiple. The native "required" added by #rerequireField is then enforced by reportValidity() on a field inside a display:none fieldset (hidden by the multi-step navigation), which the browser cannot focus.
Fix:
Resolves: #128