AJAX views pager not working when rendered through layout builder

Created on 16 July 2024, about 2 months ago
Updated 18 July 2024, about 2 months ago

Problem/Motivation

When rendering a view with an AJAX pager through layout builder, either directly or through other means (e.g. Views Reference Field β†’ on a content block), the pager does not receive the AJAX behavior, and instead reloads the page with the non-AJAX page query parameter appended.

At first glance it doesn't appear to be an issue with what's being #attached to the view. I've inspected both renderings through a post-render hook in a custom module, see below, and the only differences are the ones you'd expect such as their respective view_dom_ids.

function hook_views_post_render(ViewExecutable $view, &$output, CachePluginBase $cache) {
  dpm($view->element['#attached'], $view->id());
}

The rendering within Layout Builder has no trace of data-once="ajax-pager". Inspecting drupalSettings.views shows the view is found, though it doesn't receive the behavior.

If I render the view on the same page through a region, it receives the intended ajax-pager behavior.

At this point I have exhausted my knowledge on both the Layout Builder and Views APIs. Further debugging from those with more intimate knowledge of the aforementioned APIs would be much appreciated.

I have been able to reliably reproduce this issue using a standard DDEV install on Drupal 10.3.1 and PHP 8.3.

Steps to reproduce

  1. Enable the Layout Builder module
  2. Add multiple Articles nodes to test the pager with
  3. Create a content view with an AJAX pager, either full or mini, and set a per-page count smaller than the amount of nodes you created so paging can be tested
  4. Create a new vocabulary that uses Layout Builder for the default display mode
  5. Manage the layout for the new vocabulary and add a new section with the AJAX view inside
  6. Add a term to the new vocabulary and view it on the front end
  7. Interact with the AJAX view's pager and observe a page reload with the non-AJAX page query parameter appended

Proposed resolution

TBD

Remaining tasks

  • Find the cause of the issue
  • Implement a fix
πŸ› Bug report
Status

Active

Version

11.0 πŸ”₯

Component
Layout builderΒ  β†’

Last updated less than a minute ago

Created by

πŸ‡ΊπŸ‡ΈUnited States FrankieD3

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @FrankieD3
  • πŸ‡³πŸ‡ΏNew Zealand DanielVeza Brisbane, AU

    Confirming that I can replicate this on D11, so updating the version.

    It's a strange one. 2x pagers render specfically when embedding a views block in LB, but only on taxonomy term pages. An additional mini pager is rendered along with the one that comes from the view.

    If you embed a block through the block management on a term without Layout Builder, it works as expected. I changed theme and the issue still happened, so it doesn't appear to be a theme issue.

    Spent a bit of time trying to track this down but couldn't manage it. Leaving these notes here to pick up later.

  • πŸ‡¬πŸ‡§United Kingdom catch

    Is this reproducible on 10.2.x? Might need a git bisect potentially.

  • πŸ‡³πŸ‡ΏNew Zealand quietone New Zealand
  • πŸ‡ΊπŸ‡ΈUnited States FrankieD3
  • πŸ‡ΊπŸ‡ΈUnited States FrankieD3

    I can confirm that this is reproducible in 10.2.x, as well as the additional pager render mentioned in #2.

  • πŸ‡³πŸ‡ΏNew Zealand DanielVeza Brisbane, AU

    Ah ok - I tracked this down.

    This issue stems from the fact that /taxonomy/term/X is already a view page, that also embeds terms in the view header. The workaround is to disable the taxonomy term view, since it's not needed if you're using LB with a term page.

    This feels like a pretty painful spider web to untangle, I wonder if we should add a warning when you enable LB on a vocab display to make sure that either the view is disabled or a filter has been added to the view so exclude this particular vocab

  • πŸ‡¬πŸ‡§United Kingdom catch

    This issue stems from the fact that /taxonomy/term/X is already a view page, that also embeds terms in the view header. The workaround is to disable the taxonomy term view, since it's not needed if you're using LB with a term page.

    Wait so was the taxonomy/term/x view executing but not rendering? Or both views were rendered on the page?

Production build 0.71.5 2024