Answers.min.js throws an error when there are % symbols in the url

Search
1

Hello,

We are loading the Answers Search Bar script (https://assets.sitescdn.net/answers-search-bar/v1.0/answers.min.js) as part of the navigation on yext.com.

I noticed that whenever we have a URL with encoded query params (containing “%”), the script throws an error and prevents the Answers Search Bar from working.
I tried different versions of the script, but they all seem to throw the same error:

Screenshot 2022-03-07 at 13.16.29
Screenshot 2022-03-07 at 13.16.29884×203 33.8 KB

In the case above we are encoding a stringified json object with encodeURIComponent and setting the url params.

Any help would be appreciated, thanks!

2

Turns out I was “double” encoding the stringified JSON object, which was causing the error.

const searchParams = new URLSearchParams(window.location.search);
const encodedFiltersString = encodeURIComponent(
    JSON.stringify(formattedFilters)
  );
searchParams.set("facetFilters", encodedFiltersString);

In the code above the searchParams.set (new URLSearchParams) was already encoding the string, so there was no need to encode the JSON string with encodeURIComponent.
So I just did:

const filtersString = JSON.stringify(formattedFilters);

And that solved the issue.