[BUGFIX] Fix change=reload for group fields

This patch implements the "Refresh required" dialog for group fields
configured to request a reload once their value changes.
In the same run the validation is now applied to the field holding the
actual value, which requires a minor change in the validation process.

Resolves: #93855
Releases: master,10.4
Change-Id: I1a1cd1ff65230da23c820b94b82644d860e06f39
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/69364
Tested-by: core-ci <typo3@b13.com>
Tested-by: Richard Haeser <richard@richardhaeser.com>
Reviewed-by: Richard Haeser <richard@richardhaeser.com>

typo3/sysext/backend/Classes/Form/Element/GroupElement.php

@@ -246,7 +246,6 @@ public function render()
         $selectorAttributes = [
             'id' => $fieldId,
             'data-formengine-input-name' => htmlspecialchars($elementName),
-            'data-formengine-validation-rules' => $this->getValidationDataAsJsonString($config),
             'data-maxitems' => (string)$maxItems,
             'size' => (string)$size,
         ];
@@ -365,7 +364,12 @@ public function render()
             $html[] = '</div>';
         }
         $html[] =   '</div>';
-        $html[] =   '<input type="hidden" name="' . htmlspecialchars($elementName) . '" value="' . htmlspecialchars(implode(',', $listOfSelectedValues)) . '" />';
+        $html[] =   '<input type="hidden"';
+        $html[] =       ' data-formengine-validation-rules="' . htmlspecialchars($this->getValidationDataAsJsonString($config)) . '"';
+        $html[] =       ' name="' . htmlspecialchars($elementName) . '"';
+        $html[] =       ' value="' . htmlspecialchars(implode(',', $listOfSelectedValues)) . '"';
+        $html[] =       ' onchange="' . htmlspecialchars(implode('', $parameterArray['fieldChangeFunc'])) . '"';
+        $html[] =   ' />';
         $html[] = '</div>';
 
         $resultArray['requireJsModules'][] = ['TYPO3/CMS/Backend/FormEngine/Element/GroupElement' => '

typo3/sysext/backend/Resources/Public/JavaScript/FormEngine.js

@@ -131,13 +131,14 @@ define(['jquery',
     exclusiveValues = String(exclusiveValues);
 
     var $fieldEl,
-      $originalFieldEl,
+      originalFieldEl,
       isMultiple = false,
       isList = false;
 
-    $originalFieldEl = $fieldEl = FormEngine.getFieldElement(fieldName);
+    $fieldEl = FormEngine.getFieldElement(fieldName);
+    originalFieldEl = $fieldEl.get(0);
 
-    if ($originalFieldEl.length === 0 || value === '--div--') {
+    if (originalFieldEl === null || value === '--div--') {
       return;
     }
 
@@ -227,11 +228,11 @@ define(['jquery',
         $option.appendTo($fieldEl);
 
         // set the hidden field
-        FormEngine.updateHiddenFieldValueFromSelect($fieldEl, $originalFieldEl);
+        FormEngine.updateHiddenFieldValueFromSelect($fieldEl, originalFieldEl);
 
         // execute the phpcode from $FormEngine->TBE_EDITOR_fieldChanged_func
         FormEngine.legacyFieldChangedCb();
-        FormEngineValidation.markFieldAsChanged($originalFieldEl);
+        FormEngineValidation.markFieldAsChanged(originalFieldEl);
         FormEngine.Validation.validateField($fieldEl);
         FormEngine.Validation.validateField($availableFieldEl);
       }
@@ -282,7 +283,8 @@ define(['jquery',
 
     // make a comma separated list, if it is a multi-select
     // set the values to the final hidden field
-    $(originalFieldEl).val(selectedValues.join(','));
+    originalFieldEl.value = selectedValues.join(',');
+    originalFieldEl.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));
   };
 
   /**
@@ -947,17 +949,27 @@ define(['jquery',
 
         $modal.on('button.clicked', function(e) {
           if (e.target.name === 'ok') {
+            FormEngine.closeModalsRecursive();
             FormEngine.saveDocument();
+          } else {
+            Modal.dismiss();
           }
-
-          Modal.dismiss();
         });
       } else {
         FormEngine.saveDocument();
       }
     });
   };
 
+  FormEngine.closeModalsRecursive = function() {
+    if (typeof Modal.currentModal !== 'undefined' && Modal.currentModal !== null) {
+      Modal.currentModal.on('hidden.bs.modal', function () {
+        FormEngine.closeModalsRecursive(Modal.currentModal);
+      });
+      Modal.currentModal.trigger('modal-dismiss');
+    }
+  }
+
   /**
    * Preview action
    *

typo3/sysext/backend/Resources/Public/JavaScript/FormEngineValidation.js

@@ -340,7 +340,7 @@ define([
           break;
         case 'group':
           if (rule.minItems || rule.maxItems) {
-            selected = field.querySelectorAll('option').length;
+            selected = FormEngineValidation.trimExplode(',', field.value).length;
             if (typeof rule.minItems !== 'undefined') {
               minItems = rule.minItems * 1;
               if (!isNaN(minItems) && selected < minItems) {