[BUG] PLP Selecting multiple refinements from different filter categories are not combined

[adamraya]

Summary

Selected refinements from different filter categories are not combined in the PLP filtering. Only selected refinements from the same filter category are being combined.

Steps To Reproduce

1. Go to https://pwa-kit.mobify-storefront.com/global/en-GB/category/mens
2. Click the filter Color “Black”
3. Click the filter Price "20 - 49.99"

Expected result

Both "Black" and "20 - 49.99" refinements are selected, with a small set of products showing.

Actual result

Only "20 - 49.99" refinement is selected, not "Black".

[uip-robot-zz]

This issue has been linked to a new work item: W-11179299

[bendvc]

By applying the following patch from within your pwa folder you can fix this issue if you pwa was generated as version 2.0.0 of 2.1.0.

@@ -0,0 +1,37 @@
diff --git a/packages/template-retail-react-app/app/utils/url.js b/packages/template-retail-react-app/app/utils/url.js
index 468f5851..a4b3bc9b 100644
--- a/packages/template-retail-react-app/app/utils/url.js
+++ b/packages/template-retail-react-app/app/utils/url.js
@@ -53,6 +53,10 @@ export const rebuildPathWithParams = (url, extraParams) => {
         // 0 is a valid value as for a param
         if (!value && value !== 0) {
             params.delete(key)
+        } else if (Array.isArray(value)) {
+            value.map((v) => {
+                params.append(key, v)
+            })
         } else {
             params.set(key, value)
         }
@@ -281,7 +285,20 @@ export const buildPathWithUrlConfig = (relativeUrl, configValues = {}, opts = {}
         })
     }
 
-    const queryParams = {...Object.fromEntries(params)}
+    const queryParams = Array.from(params.entries()).reduce((acc, curr) => {
+        const [key, value] = curr
+        const currValue = acc[key]
+
+        if (typeof currValue === 'string') {
+            acc[key] = [acc[key], value]
+        } else if (Array.isArray(currValue)) {
+            acc[key].push(value)
+        } else {
+            acc[key] = value
+        }
+
+        return acc
+    }, {})
     let basePathSegments = []
 
     // get the default values for site and locale

[adamraya]

I'm closing this issue since it's fixed on version 2.2.0. The above patch can be applied to projects generated from versions 2.0.0 and 2.1.0.