[BUGFIX] JS: Fix FormEngine initialization

The FormEngine initialization process needs to be very careful
when the DOM is accessed.
This patch separates the routines and encapsulates those in
a DOMready handler, which are critical.

This solves a possible race condition when JS is executed faster
than DOM is built.

Releases: master, 7.6
Resolves: #80481
Resolves: #80366
Change-Id: I205aebc9f87a25f06942f923497f7f535fdb0c8f
Reviewed-on: https://review.typo3.org/52208
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Markus Klein <markus.klein@typo3.org>
Tested-by: Markus Klein <markus.klein@typo3.org>

typo3/sysext/backend/Classes/Form/FormResultCompiler.php

@@ -213,9 +213,10 @@ protected function JSbottom($formname = 'forms[0]')
         $this->loadJavascriptLib($backendRelPath . 'Resources/Public/JavaScript/md5.js');
         // load the main module for FormEngine with all important JS functions
         $this->requireJsModules['TYPO3/CMS/Backend/FormEngine'] = 'function(FormEngine) {
-			FormEngine.setBrowserUrl(' . GeneralUtility::quoteJSvalue(BackendUtility::getModuleUrl('wizard_element_browser')) . ');
-			FormEngine.Validation.setUsMode(' . ($GLOBALS['TYPO3_CONF_VARS']['SYS']['USdateFormat'] ? '1' : '0') . ');
-			FormEngine.Validation.registerReady();
+			FormEngine.initialize(
+				' . GeneralUtility::quoteJSvalue(BackendUtility::getModuleUrl('wizard_element_browser')) . ',
+				' . ($GLOBALS['TYPO3_CONF_VARS']['SYS']['USdateFormat'] ? '1' : '0') . '
+			);
 		}';
 
         $pageRenderer = $this->getPageRenderer();

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

@@ -50,14 +50,6 @@ define(['jquery',
 		browserUrl: ''
 	};
 
-	/**
-	 *
-	 * @param {String} browserUrl
-	 */
-	FormEngine.setBrowserUrl = function(browserUrl) {
-		FormEngine.browserUrl = browserUrl;
-	};
-
 	// functions to connect the db/file browser with this document and the formfields on it!
 
 	/**
@@ -590,10 +582,6 @@ define(['jquery',
 	 * as it using deferrer methods only
 	 */
 	FormEngine.initializeEvents = function() {
-
-		FormEngine.initializeRemainingCharacterViews();
-		FormEngine.initializeSelectCheckboxes();
-
 		// track the arrows "Up", "Down", "Clear" etc in multi-select boxes
 		$(document).on('click', '.t3js-btn-moveoption-top, .t3js-btn-moveoption-up, .t3js-btn-moveoption-down, .t3js-btn-moveoption-bottom, .t3js-btn-removeoption', function(evt) {
 			evt.preventDefault();
@@ -952,7 +940,7 @@ define(['jquery',
 				}
 			});
 		} else {
-			FormEngine.closeDocument()
+			FormEngine.closeDocument();
 		}
 	};
 
@@ -988,14 +976,34 @@ define(['jquery',
 		document.editform.submit();
 	};
 
+	/**
+	 * Main init function called from outside
+	 *
+	 * Sets some options and registers the DOMready handler to initialize further things
+	 *
+	 * @param {String} browserUrl
+	 * @param {Number} mode
+	 */
+	FormEngine.initialize = function(browserUrl, mode) {
+		FormEngine.browserUrl = browserUrl;
+		FormEngine.Validation.setUsMode(mode);
+
+		$(function() {
+			FormEngine.initializeRemainingCharacterViews();
+			FormEngine.initializeSelectCheckboxes();
+			FormEngine.Validation.initialize();
+			FormEngine.reinitialize();
+		});
+	};
+
 	/**
 	 * initialize function, always require possible post-render hooks return the main object
 	 */
 
-	// the functions are both using delegates, thus no need to be called again
+	// the events are only bound to the document, which is already present for sure.
+	// no need to have it in DOMready handler
 	FormEngine.initializeEvents();
 	FormEngine.SelectBoxFilter.initializeEvents();
-	FormEngine.reinitialize();
 
 	// load required modules to hook in the post initialize function
 	if (undefined !== TYPO3.settings.RequireJS && undefined !== TYPO3.settings.RequireJS.PostInitializationModules['TYPO3/CMS/Backend/FormEngine']) {

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

@@ -1054,15 +1054,5 @@ define(['jquery'], function ($) {
 		return result;
 	};
 
-	FormEngineValidation.registerReady = function() {
-		$(function() {
-			FormEngineValidation.initialize();
-			// Start first validation after one second, because all fields are initial empty (typo3form.fieldSet)
-			window.setTimeout(function() {
-				FormEngineValidation.validate();
-			}, 1000);
-		});
-	};
-
 	return FormEngineValidation;
 });