Is the issue of collection items appearing and disappearing during filtering with finsweets CMS Load a bug or a misconfiguration in Webflow?
TL;DR
- Initialize CMS Filter only after all CMS Load batches are fully loaded to ensure all items are included in filtering.
- Verify correct data attributes and consistent structure across items, and avoid filtering before all items are loaded when using lazy loading or pagination.
- Use the latest Finsweet scripts and clear browser cache to prevent version conflicts.
If collection items are appearing and disappearing during filtering when using Finsweet’s CMS Load and Filter, the issue is most commonly caused by a misconfiguration, not a bug in Webflow or the Finsweet library.
1. Ensure CMS Load Targeting is Correct
- CMS Load dynamically adds items to the DOM, which the CMS Filter script must also be aware of.
- Make sure that the CMS Filter is initialized after all CMS Load batches have finished loading, or that the CMS Filter is set to dynamically watch for updates.
- Finsweet recommends initializing CMS Filter after the entire list (i.e., all pagination data) is loaded if filtering must apply across all items.
2. Check Data Attributes and Structure
- Each filterable item must have the proper data attributes (e.g.,
fs-cmsfilter-field="category"). - Ensure that every item has the exact same class and structure when added via CMS Load. If elements differ slightly, filtering may behave unpredictably.
3. Handle Load-More Configuration
- If you're using lazy loading or “Load More” pagination via CMS Load, and then filtering based on visible items only, Webflow may re-render the DOM unexpectedly.
- Filtering before loading all items can result in items appearing/disappearing because Finsweet is only filtering currently loaded items, not all collection entries.
4. Use Pagination with Filtering Properly
- Finsweet only supports filtering across all items if you're using CMS Load in “Load All” mode or you've loaded all pages manually.
- If you apply filters before all items are loaded, you'll only filter what’s on the page, and the rest may appear/disappear as new batches load.
5. Use Latest Versions
- Make sure you’re using the most recent versions of Finsweet Attributes scripts from https://www.finsweet.com/attributes.
- Browser caching can sometimes cause older versions to load. Clear your cache or use incognito mode to test updates.
Summary
The issue of collection items appearing and disappearing during filtering with Finsweet’s CMS Load is typically due to a misconfiguration in how CMS Load and Filter are timed or initialized, often relating to pagination or when filtering is applied. Ensuring that all items are loaded before filtering, and that data attributes are configured correctly, will resolve this behavior.