Filter Query Parameters have extra spaces in them

Attributes
,
1

The Issue

I’m having an issue where URL Query Parameters using attributes v2 are adding a bunch of encoded characters at the beginning and end of the filter value. What this is also meaning is that if I don’t include all those extra characters the filters are not visually marked as active on page load.

For example if I want to use a link elsewhere on the site where the Structure filter is set to Nonprofit the link structure should be like this
fellows?structure_equal=Nonprofit
Instead, the link when I use a filter on the page is formatted like this
fellows?structure_equal=%5B%22Nonprofit%22%5D

You’ll notice that if you click on the first link it loads the filter and shows the tag correctly, but doesn’t check the checkbox, and it needs the other random characters for the checkbox to be checked. This isn’t an ideal UX and is an issue when it comes to using the filter parameter links elsewhere on the site (which I do quite a lot).

Exception to the issues

For some reason this issue is not affecting the sectors filters which use a radio input instead of a checkbox input. and for those filters if I add those extra characters they I have the same issue where the radios aren’t visually marked, but if the characters are removed it works as expected.

Any help would be appreciated, thanks so much!

2

Hey @caleb.raney! :waving_hand:

There’s a difference between how checkbox filters and radio filters generate URL parameters.

With checkboxes, v2 wraps values in a JSON array format (like ["value"]), which gets URL-encoded as %5B%22value%22%5D. That’s why:

  • Your structure_equal=Nonprofit becomes structure_equal=%5B%22Nonprofit%22%5D
  • The checkbox only shows as checked with this encoded version
  • Radio buttons work differently since they’re single-select

The simplest fix would be switching your Structure filter from checkboxes to radio buttons if users only need to select one structure type. This gives you cleaner URLs and maintains the active state.

If you need to keep the multi-select checkbox functionality, you’ll need to use the encoded format in your manual links: fellows?structure_equal=%5B%22Nonprofit%22%5D

Would radio buttons work for your needs, or do you need multiple structure selections? @Support-Luis or @Support-Pedro can help if you need a custom JavaScript solution to handle this automatically.

3

I can double check with the client but I believe they’ll need checkboxes for the geography filters at least. I appreciate the explanation of why this is the case though, For most of the links to specific filters I’m generating them programmatically so I can maybe build in an additional check in javascript when creating the link based on what the category is.
eg. if the filter category is structure, relationship, or geography add the extra characters but don’t add them for sector…

4

Hey @caleb.raney! I believe that you can also build the query params using listInstance.filters.value to access the values of the filters.

Sharing the API docs below in case you want to take a look!