Avoid square brackets in URL and make querystring shorter. Only accept valid filter...

diff --git a/resources/js/components/ProductsFilters.vue b/resources/js/components/ProductsFilters.vue
index 2097cd5efba5abd14902926212dec97d042324cc..e712303fbe58ab67caaf1b776d6a362a3a602748 100644 (file)
--- a/resources/js/components/ProductsFilters.vue
+++ b/resources/js/components/ProductsFilters.vue
@@ -173,7 +173,12 @@
 
                 handler(oldFilters, newFilters) {
                     if (this.filterQuerystring !== '') {
-                        history.replaceState(newFilters, '', '?' + this.filterQuerystring);
+
+                        // Using square brackets in the URL can cause problems due to URL encoding and decoding
+                        // so it's better to remove them while also shortening the URL to simply use Fx=...
+                        const safeQuerystring = this.filterQuerystring.replace(/filter\[(\d+)]/g, 'F$1');
+
+                        history.replaceState(newFilters, '', '?' + safeQuerystring);
                     }
                 }
             }
@@ -276,8 +281,10 @@
                         // Values may be a number or a string ('-') so don't try to convert them to integers
                         value = value.split(';');
 
-                        // Update the actual filter data
-                        $this.filters[key] = value;
+                        // Update the actual filter data if the key exists
+                        if ($this.filters.hasOwnProperty(key)) {
+                            $this.filters[key] = value;
+                        }
                     });
 
                     $this.updateFilters();