>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3091260. --> Reported by: [anybody](https://www.drupal.org/user/291091) Related to !25 >>> <p>I just invested serveral hours in digging deep into the structures how Cookiebots auto-blocking works and why Drupal 8 scripts are not working correctly in combination with it.</p> <p>Today there isn't much time left for this topic, so I'll try to sum up what's the problem and what may be our workaround. Finally we should further investigate if there are safe ways to fix this (perhaps with the Cookiebot team, because they would also have a huge benefit for their script for non jQuery environments) or live with that workaround and harden it for edge-cases.</p> <h2>Context</h2> <p>Using Cookiebot in Drupal 8 with data-blockingmode="auto" (<a href="https://www.cookiebot.com/en/automatic-cookie-control/">https://www.cookiebot.com/en/automatic-cookie-control/</a>) which is very helpful in general. Also see <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/cookiebot/-/work_items/3090518" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/cookiebot/-/work_items/3090518</a></span> for a switch for the blockingmode.</p> <p><em>Drupal 7 uses regular jQuery document.ready() so this problem will not exist here.</em></p> <h2>Problem / TLDR:</h2> <p>Due to <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/drupal/issues/1974580" title="Status: Closed (fixed)">#1974580: Introduce domReady to remove jQuery dependency from drupal.js and clean it up.</a></span> Drupal 8 uses <a href="https://github.com/ded/domready">https://github.com/ded/domready</a> instad of jQuery document.ready() while Cookiebot relies on <a href="https://api.jquery.com/jQuery.holdReady">https://api.jquery.com/jQuery.holdReady</a> to trigger Script execution after everything has been loaded (it postpones the regular event, until all external scripts have been handled, which is very clever).</p> <p>In core/misc/drupal.init.js you can find this code:</p> <div class="codeblock"> <pre><span style="color: #000000"><span style="color: #0000BB">&lt;?php<br></span><span style="color: #007700">(function (</span><span style="color: #0000BB">domready</span><span style="color: #007700">, </span><span style="color: #0000BB">Drupal</span><span style="color: #007700">, </span><span style="color: #0000BB">drupalSettings</span><span style="color: #007700">) {<br>&nbsp; </span><span style="color: #0000BB">domready</span><span style="color: #007700">(function () {<br>&nbsp;&nbsp;&nbsp; </span><span style="color: #0000BB">Drupal</span><span style="color: #007700">.</span><span style="color: #0000BB">attachBehaviors</span><span style="color: #007700">(</span><span style="color: #0000BB">document</span><span style="color: #007700">, </span><span style="color: #0000BB">drupalSettings</span><span style="color: #007700">);<br>&nbsp; });<br>})(</span><span style="color: #0000BB">domready</span><span style="color: #007700">, </span><span style="color: #0000BB">Drupal</span><span style="color: #007700">, </span><span style="color: #0000BB">window</span><span style="color: #007700">.</span><span style="color: #0000BB">drupalSettings</span><span style="color: #007700">);<br></span><span style="color: #0000BB">?&gt;</span></span></pre></div> <p>Which in former times was jQuery, as described here: <a href="https://www.lullabot.com/articles/understanding-javascript-behaviors-in-drupal">https://www.lullabot.com/articles/understanding-javascript-behaviors-in-drupal</a></p> <p>Because the jQuery.holdReady(0) from cookiebot has no effect on this, Drupal.attachBehaviors(document, drupalSettings); already runs to early, when no scripts have been loaded.<br> <strong>Perhaps we may even have race conditions here, which would be worse.</strong></p> <p><strong>UPDATE: SEE <a href="https://www.drupal.org/node/3086669">https://www.drupal.org/node/3086669</a></strong></p> <h2>Proposed solution:</h2> <p>We won't change core so I only see three possible solutions for us (best to worst):</p> <ol> <li>Instead of relying on jQuery, Cookiebot uses Vanilla JS which halts the the code behind jQuery AND vanilla solutions like the one in domready: <a href="https://github.com/ded/domready/blob/master/src/ready.js">https://github.com/ded/domready/blob/master/src/ready.js</a> setting the readystate unready - All projects without jQuery would be fixed then!</li> <li>We find a safe way for this Drupal 8 module to ensure that domready() is only executed once AFTER Cookiebot did its job. It should then be bulletproof to also work if Cookiebot doesn't work or can't be loaded due to any reasons.</li> <li>We use the following workaround and HOPE that there are no side-effects or race conditions. I'd hope I could believe in that, but I can't yet...</li> </ol> <p>Short version: Add the following code to cookiebot.js in this module:</p> <pre>jQuery(function () {<br>&nbsp; Drupal.attachBehaviors(document, Drupal.settings);<br>});</pre><p> which will be automatically called by the Cookiebot script after all scripts have been handled.</p> <p>I'll create a long version with a variable to ensure it's only called once as patch.</p> <h2>Tasks</h2> <ul> <li><del>Implement a proof-of-concept for re-triggering attach() in cookiebot.js</del></li> <li>After <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/cookiebot/-/work_items/3090518" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/cookiebot/-/work_items/3090518</a></span> has been fixed: Only run the P-O-C code if autoblocking is enabled</li> <li>Review &amp; test if the fix works</li> <li>Implement a clean solution based on the working code</li> <li>Commit and create a new release</li> </ul> <h3>Sidenote:</h3> <p>Before I used </p> <pre>$window.on('CookiebotOnTagsExecuted', function () {}</pre><p> instead, but I think that's less stable and may be called several times on several events (load, accept, ...)</p> <h3>Suggestions:</h3> <p>I guess we should encapsulate that workaround into<br> <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/cookiebot/-/work_items/3090518" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/cookiebot/-/work_items/3090518</a></span> to only be executed if block mode is set to "auto".</p> <p>Thank you!</p> <p>PS: Is anyone in contact with the Team from Cookiebot? They might have a look and help to find a clever JS solution!</p> > Related issue: [Issue #1993622](https://www.drupal.org/node/1993622)