bin/controls/CaptchaDisplay.js

@@ -38,6 +38,7 @@ define('package/quiqqer/captcha/bin/controls/CaptchaDisplay', [
             this.Loader          = new QUILoader();
             this.$CaptchaControl = null;
             this.$ResponseInput  = null;
+            this.$loaded = false;
 
             this.addEvents({
                 onInject: this.$onInject,
@@ -49,16 +50,19 @@ define('package/quiqqer/captcha/bin/controls/CaptchaDisplay', [
          * event: onInject
          */
         $onInject: function () {
-            var self = this;
-
             this.Loader.inject(this.$Elm);
             this.Loader.show();
 
-            this.$getCurrentCaptchaControl().then(function (captchaControlHtml) {
-                self.$Elm.set('html', captchaControlHtml);
+            this.$getCurrentCaptchaControl().then((captchaControlHtml) => {
+                this.$Elm.set('html', captchaControlHtml);
+
+                if (this.$Elm.get('data-quiid')) {
+                    this.setAttribute('module_has_js_control', true);
+                }
 
-                QUI.parse(self.$Elm).then(function () {
-                    self.Loader.hide();
+                QUI.parse(this.$Elm).then(() => {
+                    this.Loader.hide();
+                    this.$loaded = true;
                 });
             });
         },
@@ -67,8 +71,7 @@ define('package/quiqqer/captcha/bin/controls/CaptchaDisplay', [
          * event: onImport
          */
         $onImport: function () {
-            var self                 = this;
-            var CaptchaResponseInput = this.$Elm.getElement('input[name="quiqqer-captcha-response"]');
+            const CaptchaResponseInput = this.$Elm.getElement('input[name="quiqqer-captcha-response"]');
 
             if (!CaptchaResponseInput) {
                 return;
@@ -79,7 +82,8 @@ define('package/quiqqer/captcha/bin/controls/CaptchaDisplay', [
             this.Loader.show();
 
             this.getCaptchaControl().then((CaptchaControl) => {
-                self.Loader.show();
+                this.$loaded = true;
+                this.Loader.show();
 
                 if (this.getAttribute('module_has_js_control')) {
                     CaptchaControl.addEvents({
@@ -117,7 +121,9 @@ define('package/quiqqer/captcha/bin/controls/CaptchaDisplay', [
          *
          * @return {Promise}
          */
-        getCaptchaControl: function () {
+        getCaptchaControl: async function () {
+            await this.$waitForLoaded();
+
             if (this.$CaptchaControl) {
                 return Promise.resolve(this.$CaptchaControl);
             }
@@ -135,6 +141,27 @@ define('package/quiqqer/captcha/bin/controls/CaptchaDisplay', [
             return Promise.resolve(this.$CaptchaControl);
         },
 
+        /**
+         * Wait for this control to be loaded
+         * @return {Promise<void>}
+         */
+        $waitForLoaded: async function() {
+            if (this.$loaded) {
+                return;
+            }
+
+            return new Promise((resolve) => {
+                const waitForLoaded = setInterval(() => {
+                    if (!this.$loaded) {
+                        return;
+                    }
+
+                    clearInterval(waitForLoaded);
+                    resolve();
+                }, 200);
+            });
+        },
+
         /**
          * Set settings to input
          */