Pagination broke in 1.9.0

Describe the bug

I’m sorry I can’t give a huge amount of detail, but I’ve just gone through the past 5 versions of Sprig to work out where it happened. In 1.8.1 our code for displaying a paginated list of entries (also displayed on a Google Maps plugin map) worked fine. Since updating to 1.9.0 (and 1.9.1, 2, 3). clicking the pagination buttons just scrolls to the top of the page instead of paginating the sprig list.

Wrapper template

{# Map + Pagination #}
{{ sprig('_includes/projectsMap') }}

{# Load Sprig's htmx requirement from a CDN #}
{{ sprig.script }}

{# When sprig filters the results, update the map #}
<script>
	htmx.on('htmx:afterSettle', function(event) { googleMaps.init('projects-map'); });
</script>

_includes/projectsMap

{# Sets a default value if not defined by `s-val:*` on the clicked element #}
{% set page = page ?? 1 %}

{# Search parameters from the URL come from the form fields below the map #}
{% set searchTitle = craft.app.request.getParam('searchTitle')|default('') %}
{% set searchCategory = craft.app.request.getParam('searchCategory')|default('') %}
{% set sort = craft.app.request.getParam('sort')|default('projectSwitchOnDate desc') %}

{# Set up basic query params #}
{% set queryParams = {
	section: 'projects',
	with: ['projectCategories']
} %}

{# Set up an empty array for use with related parameters #}
{% set relatedParams = [] %}

{# ? Run through each search field and add to the query #}

{# * Title #}
{% if searchTitle is not empty %}
  {% set queryParams = queryParams|merge({ search: { query: 'title:' ~ searchTitle } }) %}
{% endif %}

{# * Sort #}
{% if sort is not empty %}
  {# Sort order #}
  {% set queryParams = queryParams|merge({ orderBy: sort }) %}
{% else %}
  {# If no sort order is selected, default to most recent #}
  {% set queryParams = queryParams|merge({ orderBy: 'projectSwitchOnDate desc' }) %}
{% endif %}

{% set mapSearchParams = { components: { country: 'US' }} %}

{# * Type/Category #}
{% if searchCategory is not empty %}
  {# Set the category object from the URL parameter #}
  {% set searchCategoryObject = craft.categories.group('projects').slug(searchCategory).one() %}
  {% set relatedParams = [ { targetElement: searchCategoryObject } ] %}
{% endif %}

{# If a category is selected, merge the relatedParams set above into the query #}
{% if relatedParams|length %}
  {% set queryParams = queryParams|merge({ relatedTo: relatedParams }) %}
{% endif %}

{# ? Don't add .all() here because the list view uses the same query, and can't have .all() on it #}
{% set locations = craft.entries(queryParams).projectAddress(mapSearchParams) %}

<form sprig>
  <label for="searchTitle" class="visually-hidden">Search projects</label>
  <input sprig s-trigger="keyup changed delay:500ms" s-replace="#sprig-map-results" type="text" class="form-control" name="searchTitle" id="searchTitle" placeholder="Search projects" value="{{ searchTitle }}" />

  <label class="d-inline-block font-heading text-blue-dark me-1">Filters</label>
  <select sprig s-replace="#sprig-map-results" name="searchCategory" id="searchCategory" class="form-select">
    <option value=""> Select project type </option>

    {% for cat in craft.categories.group('projects').all() %}
      <option value="{{ cat.slug }}" {{ cat.slug == searchCategory ? 'selected' }}>
        {{ cat.title }}
      </option>
    {% endfor %}
  </select>

  <label class="d-inline-block font-heading text-blue-dark me-1">Sort</label>
  <select sprig s-replace="#sprig-map-results" name="sort" id="sort" class="form-select">
    <option value="title asc" {{ sort == 'title asc' ? 'selected' }}>
      Project: A-Z
    </option>
    <option value="title desc" {{ sort == 'title desc' ? 'selected' }}>
      Project: Z-A
    </option>
  </select>
</form>

{# Create the options for map appearance #}
{% set mapRenderOptions = {
  id: 'projects-map',
  height: 650,
  cluster: {
    renderer: 'CustomRenderer',
    imagePath: '/assets/images/map-clusters/m'
  },
  mapOptions: {
    streetViewControl: false,
    mapTypeControl: false
  },
  infoWindowTemplate: '_includes/infoWindow'
} %}

{# Create the map object with the locations and options #}
{# ? Add .all() to this locations array so the map works #}
{% set map = googleMaps.map(locations.all(), mapRenderOptions) %}

<div id="sprig-map-results">
  {# Render the map #}
  {{ map.tag() }}

  {# ? https://putyourlightson.com/plugins/sprig#sprig.paginateelementquery-page #}
  {# ? https://putyourlightson.com/sprig/cookbook#pagination #}

  {# Set pageInfo using Sprig so pagination is reactive #}
  {% set entryQuery = craft.entries(queryParams).limit(10) %}

  {% set pageInfo = sprig.paginate(entryQuery, page) %}
  {% set entries = pageInfo.pageResults %}

  <table class="table mb-6">
    {% for project in entries %}
      {{ project.title }}
    {% endfor %}
  </table>
  
  {% if page > 1 %}
    {# If this isn't the first page, show the back button #}
    <a href="#" sprig s-val:page="{{ page - 1 }}" s-push-url="?page={{ page - 1 }}">Prev</a>
  {% endif %}
  {% for i in pageInfo.getDynamicRange(3) %}
    {% if i == page %}
      <span class="current">{{ i }}</span>
    {% else %}
      {# Refreshes the component and pushes the new value into the URL #}
      <a sprig s-val:page="{{ i }}" href="#" s-push-url="?page={{ i }}">{{ i }}</a>
    {% endif %}
  {% endfor %}
  {% if page < pageInfo.totalPages %}
    {# If this isn't the last page, show the next button #}
    <a href="#" sprig s-val:page="{{ page + 1 }}" s-push-url="?page={{ page + 1 }}">Next</a>
  {% endif %}
</div>

Expected behaviour

Pagination should switch pages without refreshing the page, like Sprig pagination normally does. Works fine on 1.8.1. In 1.9.0+, clicking a pagination number scrolls the page up (because of the #), but doesn’t paginate.

Versions

• Plugin version: Works in 1.8.1. Breaks in 1.9.0+
• Craft version: 3.7.16

[lindseydiloreto]

@bencroker is correct, this is probably more of a Google Maps issue than a Sprig issue (though it’s still not 100% certain).

We ran into a problem where someone had an insane amount of markers (thousands), each with an attached info window. Prior to v4.1.5, all of the info window data was being compacted into the data-dna of the map container. Unfortunately, this caused a conflict with Sprig… It made the div tag absolutely enormous, and Sprig stopped processing it (similar to what you described).

So in v4.1.5, we refactored how info windows are handled. The pre-rendered HTML for info windows is no longer stored within the data-dna attribute, those snippets are now stored outside of the div in a simple JavaScript variable.

Unfortunately, this introduced a couple of minor regression bugs. With the exception of one, all the regression issues have been fixed. But this one might be a little more complicated to sort out.

Due to timing and other factors, we were pushed to update the Google Maps plugin to be compatible with Craft 4, without having a chance to properly fix this issue first. When a fix for this is introduced, it will likely only be available on Craft 4.

@darylknight I will ping you via Discord DM to figure out what the best next step is. At some point we will be releasing a proper fix for this issue, but that may still be several weeks away.

[darylknight]

Thanks Lindsey. I’ve just tried that and have the same result - pagination scrolls back up the page, and the filters don’t do anything.