Problem/Motivation

After merging #3504386: Use a placeholder for the navigation toolbar, it was noticed that the Navigation's expand/collapse button is not working as expected anymore when Big Pipe module is enabled.

To avoid multiple js initializations, the code has the following instance:
if (context === document)

Once the Navigation component is served using a lazy builder, this logic could not work because the navigation bar could be served when the context is not the full document.

Steps to reproduce

Test on pages with Olivero theme

  • Install a vanilla drupal site and ensure that navigation and big_pipe modules are installed
  • Login as an admin
  • Confirm that navigation's expand/collapse button is not working
  • Uninstall big_pipe module
  • Reload the page and confirm that expand/collapse button is working again

Proposed resolution

Find an alternative logic to determine whether the component should be initialized or not.

Remaining tasks

Review and test.

User interface changes

None.

Introduced terminology

None.

API changes

None.

Data model changes

None.

Release notes snippet

Bug fix. N/A

Issue fork drupal-3504722

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

plopesc created an issue. See original summary.

plopesc’s picture

Issue summary: View changes
Status: Active » Needs review

Created MR where the mentioned if clause is replaced by a check for the element in the context.
Also updated the specific Nightwatch test for this functionality to use big_pipe.

Tested manually and at first glance it works well, but a review from more experienced JS developer would be appreciated.

kushagra.goyal’s picture

Hi @plopesc,

I followed the same steps you mentioned and performed a fresh setup with the following modules. After installing the modules, the collapse and expand functionality worked as expected for me.

Does this issue occur consistently for you, or is it intermittent? Please let me know if there are any specific steps or configurations you have applied so I can look more effectively.

finnsky’s picture

Issue summary: View changes
finnsky’s picture

I suddenly discovered that we don't need context and behavior.

plopesc’s picture

Tested manually and it behaves as expected, fixing the reported bug.

However, the JS here is out of my technical knowledge. So I prefer to have the RTBC signoff from a more experienced FE developer.

Thank you!

smustgrave’s picture

Status: Needs review » Needs work

So ran the test-only feature and appears to be passing. Possible it could be something else?

finnsky’s picture

@smustgrave i'm not sure. what you mean? tests green. we need review here

smustgrave’s picture

Unless nightwatch doesn’t work in the test only feature I’d expect the test to fail without the fix

finnsky’s picture

Status: Needs work » Needs review

Then I would solve the testing problem in the next task. Here we have a critical bug.

I have no idea how the BigPipe works and how well it is handled by Nightwatch. But now the Navigation module does not work at all in Olivero and partly in Claro.

finnsky’s picture

smustgrave’s picture

I’ll leave for someone else then. But typically see that when tests are pushed to a follow up they usually don’t happen

plopesc’s picture

Made some new changes in the Nightwatch test to ensure that cache is cleared before reloading the navigation after installing bigpipe and it failed locally without the JS changes.

However, the test-only job stays green. I don't see whether the specific nightwatch test was executed either. Could it be something wrong with the CI job?

catch’s picture

I'm not sure the test only job supports nightwatch at all.

It might be worth a second, test only MR, to show the nightwatch test failing without the fix just to make sure it's not a bigger CI issue.

plopesc’s picture

Created MR 11227 that demonstrates that test-only changes break the Nightwatch test, while the original MR 11124 is still green.

m4olivei’s picture

Issue summary: View changes
Status: Needs review » Reviewed & tested by the community

The code looks great, some nice simplifications while addressing the bug.

I've tested with and without big_pipe. The expand/collapse logic works in both scenarios. I've also tested all of the triggers for expand/collapse, which include the hamburger, close icon, and overlay on mobile as well as the bottom left arrow on desktop. All of those scenarios work as designed.

RTBC for me. Nice work all!

  • nod_ committed d0e11e1d on 11.x
    Issue #3504722 by plopesc, finnsky, smustgrave, catch, m4olivei:...
nod_’s picture

Version: 11.x-dev » 11.1.x-dev
Status: Reviewed & tested by the community » Patch (to be ported)

Committed d0e11e1 and pushed to 11.x. Thanks!

Could be good to have for 11.1.x, doesn't cherry pick cleanly so need a new MR

plopesc’s picture

@nod_ if I'm not mistaken, this bug was a regression introduced by #3504386: Use a placeholder for the navigation toolbar to adapt Navigation to #3493911: Add a CachedPlaceholderStrategy to optimize render cache hits and reduce layout shift from big pipe and looks like that none of them were backported to 11.1.x.

Not sure if we need to backport this one to 11.1.x then.

nod_’s picture

Version: 11.1.x-dev » 11.x-dev
Status: Patch (to be ported) » Fixed

My bad thanks for checking this!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.