diff --git a/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx b/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx
index 8d1bfdbe7..f1510c225 100644
--- a/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx
+++ b/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx
@@ -22,9 +22,7 @@ function FilterBadge({ filters, paramKey }: FilterBadgeProps) {
(key: string, value: string) => {
const currentValue = params.get(key);
const arrayValue = currentValue?.split(",") || [];
- const newValues = arrayValue.filter(
- (v) => decodeURIComponent(v) !== decodeURIComponent(value)
- );
+ const newValues = arrayValue.filter((v) => v !== value);
if (newValues.length === 0) {
params.delete(key);
} else {
@@ -50,7 +48,10 @@ function FilterBadge({ filters, paramKey }: FilterBadgeProps) {
>
{paramKey}:
- {decodeURIComponent(filter.split(":")[0])}
+ {filter
+ .split(":")[0]
+ .replaceAll("____", ":")
+ .replaceAll("||||", ",")}
{filter.split(":")[1] === "-1" && }
diff --git a/src/ui/DataTable/FilterByCellValue.tsx b/src/ui/DataTable/FilterByCellValue.tsx
index 39f2cc7fc..835ae8d41 100644
--- a/src/ui/DataTable/FilterByCellValue.tsx
+++ b/src/ui/DataTable/FilterByCellValue.tsx
@@ -35,7 +35,9 @@ export default function FilterByCellValue({
// append the new value
const updateValue = newValues
.concat(
- `${encodeURIComponent(filterValue)}:${action === "include" ? 1 : -1}`
+ `${filterValue.replaceAll(",", "||||").replaceAll(":", "____")}:${
+ action === "include" ? 1 : -1
+ }`
)
// remove duplicates
.filter((value, index, self) => self.indexOf(value) === index)
diff --git a/src/ui/Dropdowns/TristateReactSelect.tsx b/src/ui/Dropdowns/TristateReactSelect.tsx
index 16ddb222e..aef5af2a6 100644
--- a/src/ui/Dropdowns/TristateReactSelect.tsx
+++ b/src/ui/Dropdowns/TristateReactSelect.tsx
@@ -62,7 +62,11 @@ export function tristateOutputToQueryParamValue(
const [changeType, symbol] = type.split(":");
const symbolFilter = symbol?.toString() === "-1" ? "!" : "";
return `${symbolFilter}${
- encodeValue ? encodeURIComponent(changeType) : changeType
+ encodeValue
+ ? encodeURIComponent(
+ changeType.replaceAll("____", ":").replaceAll("||||", ",")
+ )
+ : changeType.replaceAll("____", ":").replaceAll("||||", ",")
}`;
})
.join(",");