List filter not working on other pages

Attributes
1

Hi! I am working on three instances of the List Filter solution on three separate pages:

The solution is currently working as intended on the Events page, but not the other two.

Things I’ve tried / double checked:

  • V2 Finsweet script is in the head tag of my page / project (I’ve tried it both places)
  • All required attributes are in place on the correct elements with matching labels
  • Viewing in a published preview link
  • Added fs-list-instance on a common parent wrapper (I don’t know if I need this since they’re not on the same page, but tried it anyway!)

Help :smiling_face_with_tear:

Read-only: Webflow - Restore + Revive

2

Hey @stacey

I have checked all three pages, Events works perfect as it’s straightforward,
as for the Find Care & Partner Directory pages, you’ll need a lil tweak to get things going

On both the Find Care & Partner Directory pages, remove the fs-list-field="locations" from the parent wrapping element that also has the fs-list-element="list"

What’s happening is that Finsweet Attributes is picking that fs-list-field="locations" from the parent as the main fs-list-field and ignoring the other inner ones

I attached a loom

Let me know how it goes, thanks

3

Thank you for this. I implemented that change, and still no luck. Any other ideas?

Also to note: The results counter seems to be working correctly on both pages (Find Care and Partner Directory), but the filters, search, and sort functionality do not.

5

UPDATE: SOLVED! :tada:

The issue was pinpointed to an infinite CSS animation on the Partner Directory and Find Care pages. The two pages that weren’t filtering both contained a pulsing dot animated with an infinite pulseGlow keyframe animation. The page where filtering worked didn’t have this animation.

It appears that when List Filter v2 runs, it waits for animations within the list to finish before re-rendering the filtered results.

Adding the following CSS resolved the issue by temporarily disabling the animation while List Filter v2 is filtering, sorting, or loading:

:is(.is-list-filtering, .is-list-sorting, .is-list-loading) .tag-colored-dot::after,
:is(.is-list-filtering, .is-list-sorting, .is-list-loading) .uui-icon-featured-outline-large::after {
  animation: none !important;
}
6

Perfect!

Glad you got it sorted!