The attachBehaviors() for document is only called after Big Pipe chunks are processed

Open on Drupal.org →

Created on 7 July 2022, over 2 years ago

Updated 1 February 2023, almost 2 years ago

Problem/Motivation

The first Drupal.attachBehaviors() call for the document is executed on DOMContentLoaded event (drupal.init.js) which only happens after the whole body is loaded.
Since Big Pipe inserts its chunks before the closing </body> tag, this means that Big Pipe practically pauses normal page load/initialization until all its chunks are loaded, leading to a possible situation where user's browser already has most DOM content but the user can't interact with it since JS is not initialized yet.

However, at the same time, the bigPipeProcessDocument method at big_pipe.js may still attach JS behaviors for the chunks in processes, even if it happens before DOMContentLoaded, leading to a situation when JS behaviors for dynamic page parts are attached before the rest of the document.
This effectively means that cached page content parts may stay unprocessed by JS code while uncached content gets processed earlier.

Steps to reproduce

1. Install Drupal core.
2. Add any block that is to be rendered with Big Pipe (i.e. use big_pipe_demo module).
3. Load the page.
4. Use JS debugger, add a breakpoint at Drupal.attachBehaviors, reload the page.
Expected:

the debugger stops as soon as main page content is loaded.

Actual:

it's not being hit until all Big Pipe chunks are rendered by PHP.

Proposed resolution

Execute Drupal.attachBehaviors once the first script[data-big-pipe-event="start"] tag is sent to a browser.

Remaining tasks

Review, automated testing, regression testing.

User interface changes

None.

API changes

None.

Data model changes

None.

Release notes snippet

Not sure about that?..

🐛 Bug report

Status

Fixed

Version

9.5

Component

Last updated about 2 hours ago

Maintained by
🇧🇪Belgium @wim leers
🇩🇪Germany @Fabianx

Created by

🇺🇦Ukraine abramm Lutsk

Live updates comments and jobs are added and updated live.

Incomplete comments

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Comment almost 2 years ago →
cilefen
There is a report of this causing a regression.
Comment almost 2 years ago →
gurunathan
The problem still exists with Drupal 9.5.3.
How to fix it?
Comment over 1 year ago →
🇧🇪Belgium herved
Just a quick note as I also stumbled on this after debugging an issue for quite a while.
As 🐛 Big Pipe calls attachBehaviors twice Closed: works as designed mentions, once is a requirement, but in my case the issue was that the class used in the once() selector was being applied to another nested element. Definitely an issue from that JS behavior.

once('foo', '.bar .baz', context).forEach(function () { ... $(this).find(...).addClass('baz'); }
Comment over 1 year ago →
dgtlmoon
Same over at https://www.drupal.org/project/drupal/issues/3347144 🐛 Form API #states property/states should use .once() to apply its rules (Can cause failures with BigPipe and possibly other situations) Needs work , `#states` fails to run properly on multi-level/complex state setups due to states handler binding multiple times when bigpipe is involved
Comment about 2 months ago →
🇮🇳India leopathu
Why this code not present in the 10.3 ?

and this issue is happening 10.3 now.

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024