Use category filtering AND load more

Describe the bug

I have some checkboxes that filter entries by category (industry), and a load more button that is supposed to append additional entries to the query results. The issue is that the load more button disappears whenever a filter is applied, even if there are more entries.

Here’s my simplified sprig component:

{% set category = craft.categories.id(categoryId).one() %}
{% set industry = industry ?? '' %}
{% set offset = offset ?? 0 %}

{# This is a category page, so before any industry sorting happens, only templates related to the category should show #}
{% set relatedTo = ['and', categoryId] %}
{% set relatedTo = industry ? relatedTo|merge(industry) : categoryId %}

<div id="filters">
  <p>Industry:</p>
  <ul>
    {% for indCat in craft.categories.group('templateCategory').all() %}
      <li>
        <input type="checkbox" id="{{ indCat.slug }}" value="{{ indCat.id }}" name="industry[]" {{ indCat.id in industry ? 'checked' }} sprig>
        <label for="{{ indCat.slug }}">{{ indCat.title }}</label>
      </li>
    {% endfor %}
  </ul>
</div>

<div id="entries">
  {# limit = 6, sent with the sprig component include #}
  {% set entryQuery = craft.entries
    .section('proposalTemplates')
    .limit(limit) 
    .offset(offset)
    .relatedTo(relatedTo)
  %}
  {% set entries = entryQuery.all() %}

  {% if entries|length %}
    {% for entry in entries %}
      <div class="entry">
        {{ entry.title }}
      </div>
    {% endfor %}
  {% endif %}
</div>

{% if entryQuery.count() > (offset + entries|length) %}
  <button id="load-more-oob" sprig
    s-val:offset="{{ offset + limit }}"
    s-select="#entries .entry"
    s-target="#entries" 
    s-swap="beforeend"
    s-swap-oob="true">
    Load More
  </button>

{% else %}
  <button id="load-more-oob" s-swap-oob="true" style="display: none"></button>
{% endif %}

Versions

• Plugin version: 1.7.0
• Craft version: Craft Pro 3.6.14

[bencroker]

After replicating your setup locally I discovered the issue. If a checkbox is clicked then the entire component is re-rendered, but since the button still has a s-swap-oob="true" attribute set, it is being excluded. So the solution is to conditionally include that attribute.

{{ sprig.trigger == 'load-more-oob' ? 's-swap-oob="true"' }}

I’ve updated the recipe at https://putyourlightson.com/sprig/cookbook#load-more-complex to reflect this.

[bencroker]

Sure, email it to [e-mail]