[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>

diff --git a/typo3/sysext/backend/Classes/Form/FormResultCompiler.php b/typo3/sysext/backend/Classes/Form/FormResultCompiler.php
index 7fab56a..c1259f0 100644 (file)
--- a/typo3/sysext/backend/Classes/Form/FormResultCompiler.php
+++ b/typo3/sysext/backend/Classes/Form/FormResultCompiler.php
@@ -213,9 +213,10 @@ class FormResultCompiler
         $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();

diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine.js b/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine.js
index 6b447ca..cdac8a6 100644 (file)
--- a/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine.js
+++ b/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();
                }
        };
 
@@ -989,13 +977,33 @@ define(['jquery',
        };
 
        /**
+        * 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']) {

diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/FormEngineValidation.js b/typo3/sysext/backend/Resources/Public/JavaScript/FormEngineValidation.js
index 4ffa0aa..9620f36 100644 (file)
--- a/typo3/sysext/backend/Resources/Public/JavaScript/FormEngineValidation.js
+++ b/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;
 });