From 1add601006642378d9ff44e25c6290df0db0f3ff Mon Sep 17 00:00:00 2001
From: Philipp Kitzberger <coding@kitze.net>
Date: Mon, 28 Sep 2026 09:52:43 +0200
Subject: [PATCH] [BUGFIX] Fix "not focusable" error on mandatory conditional
 checkbox 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: #128
---
 .../Public/JavaScript/PowermailCondition.js   | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/Resources/Public/JavaScript/PowermailCondition.js b/Resources/Public/JavaScript/PowermailCondition.js
index 7cda3d2..c87fb89 100644
--- a/Resources/Public/JavaScript/PowermailCondition.js
+++ b/Resources/Public/JavaScript/PowermailCondition.js
@@ -223,6 +223,11 @@ class PowermailCondition {
     let wrappingContainer = this.#getWrappingContainerByMarkerName(fieldMarker);
     if (wrappingContainer !== null) {
       PowermailCondition.showElement(wrappingContainer);
+      wrappingContainer.querySelectorAll('input, select, textarea').forEach((field) => {
+        field.removeAttribute('disabled');
+        this.#rerequireField(field);
+      });
+      return;
     }
     let field = this.#getFieldByMarker(fieldMarker);
     if (field !== null) {
@@ -235,6 +240,11 @@ class PowermailCondition {
     let wrappingContainer = this.#getWrappingContainerByMarkerName(fieldMarker);
     if (wrappingContainer !== null) {
       PowermailCondition.hideElement(wrappingContainer);
+      wrappingContainer.querySelectorAll('input, select, textarea').forEach((field) => {
+        field.setAttribute('disabled', 'disabled');
+        this.#derequireField(field);
+      });
+      return;
     }
     let field = this.#getFieldByMarker(fieldMarker);
     if (field !== null) {
@@ -259,17 +269,24 @@ class PowermailCondition {
   };
 
   #derequireField(field) {
-    if (field.hasAttribute('required') || field.hasAttribute('data-powermail-required')) {
+    if (field.hasAttribute('required')) {
       field.removeAttribute('required');
-      field.removeAttribute('data-powermail-required');
       field.setAttribute('data-powermailcond-required', 'required');
+    } else if (field.hasAttribute('data-powermail-required')) {
+      field.removeAttribute('data-powermail-required');
+      field.setAttribute('data-powermailcond-required', 'data-powermail-required');
     }
   };
 
   #rerequireField(field) {
-    if (field.getAttribute('data-powermailcond-required') === 'required') {
+    const bookmark = field.getAttribute('data-powermailcond-required');
+    if (bookmark === 'required') {
       if (this.#isHtml5ValidationActivated() || this.#isPowermailValidationActivated()) {
-        field.setAttribute('required', 'required')
+        field.setAttribute('required', 'required');
+      }
+    } else if (bookmark === 'data-powermail-required') {
+      if (this.#isPowermailValidationActivated()) {
+        field.setAttribute('data-powermail-required', 'true');
       }
     }
     field.removeAttribute('data-powermailcond-required');