From 2290ed8f871820e936c545e4cc6cdd49f6f9c66c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Malfait?= <felix.malfait@gmail.com>
Date: Thu, 2 Jan 2025 13:43:27 +0100
Subject: [PATCH] Fix frontend bug when filtering with special character
 (#9307)

Fixes #8767
---
 package.json                                   |  2 ++
 .../utils/isMatchingStringFilter.ts            |  7 +++++--
 yarn.lock                                      | 18 ++++++++++++++++++
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index ad08d3198..f9b0f86ca 100644
--- a/package.json
+++ b/package.json
@@ -114,6 +114,7 @@
     "lodash.chunk": "^4.2.0",
     "lodash.compact": "^3.0.1",
     "lodash.debounce": "^4.0.8",
+    "lodash.escaperegexp": "^4.1.2",
     "lodash.groupby": "^4.6.0",
     "lodash.identity": "^3.0.0",
     "lodash.isempty": "^4.4.0",
@@ -254,6 +255,7 @@
     "@types/lodash.camelcase": "^4.3.7",
     "@types/lodash.compact": "^3.0.9",
     "@types/lodash.debounce": "^4.0.7",
+    "@types/lodash.escaperegexp": "^4.1.9",
     "@types/lodash.groupby": "^4.6.9",
     "@types/lodash.identity": "^3.0.9",
     "@types/lodash.isempty": "^4.4.7",
diff --git a/packages/twenty-front/src/modules/object-record/record-filter/utils/isMatchingStringFilter.ts b/packages/twenty-front/src/modules/object-record/record-filter/utils/isMatchingStringFilter.ts
index 5c80c36fe..fa2c36a43 100644
--- a/packages/twenty-front/src/modules/object-record/record-filter/utils/isMatchingStringFilter.ts
+++ b/packages/twenty-front/src/modules/object-record/record-filter/utils/isMatchingStringFilter.ts
@@ -1,4 +1,5 @@
 import { StringFilter } from '@/object-record/graphql/types/RecordGqlOperationFilter';
+import escapeRegExp from 'lodash.escaperegexp';
 
 export const isMatchingStringFilter = ({
   stringFilter,
@@ -15,13 +16,15 @@ export const isMatchingStringFilter = ({
       return value !== stringFilter.neq;
     }
     case stringFilter.like !== undefined: {
-      const regexPattern = stringFilter.like.replace(/%/g, '.*');
+      const escapedPattern = escapeRegExp(stringFilter.like);
+      const regexPattern = escapedPattern.replace(/%/g, '.*');
       const regexCaseSensitive = new RegExp(`^${regexPattern}$`);
 
       return regexCaseSensitive.test(value);
     }
     case stringFilter.ilike !== undefined: {
-      const regexPattern = stringFilter.ilike.replace(/%/g, '.*');
+      const escapedPattern = escapeRegExp(stringFilter.ilike);
+      const regexPattern = escapedPattern.replace(/%/g, '.*');
       const regexCaseInsensitive = new RegExp(`^${regexPattern}$`, 'i');
 
       return regexCaseInsensitive.test(value);
diff --git a/yarn.lock b/yarn.lock
index 3351268d0..352de163a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16490,6 +16490,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash.escaperegexp@npm:^4.1.9":
+  version: 4.1.9
+  resolution: "@types/lodash.escaperegexp@npm:4.1.9"
+  dependencies:
+    "@types/lodash": "npm:*"
+  checksum: 10c0/ff457cacac0fed3e199fa56e44930ce8e57edaa5706d14b3d1c8b13bf6cfbac2bcc629d68f7922cb20965ac6550616c59de9b5c747cdde0f169963377b49cb18
+  languageName: node
+  linkType: hard
+
 "@types/lodash.groupby@npm:^4.6.9":
   version: 4.6.9
   resolution: "@types/lodash.groupby@npm:4.6.9"
@@ -33451,6 +33460,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.escaperegexp@npm:^4.1.2":
+  version: 4.1.2
+  resolution: "lodash.escaperegexp@npm:4.1.2"
+  checksum: 10c0/484ad4067fa9119bb0f7c19a36ab143d0173a081314993fe977bd00cf2a3c6a487ce417a10f6bac598d968364f992153315f0dbe25c9e38e3eb7581dd333e087
+  languageName: node
+  linkType: hard
+
 "lodash.filter@npm:^4.6.0":
   version: 4.6.0
   resolution: "lodash.filter@npm:4.6.0"
@@ -45169,6 +45185,7 @@ __metadata:
     "@types/lodash.chunk": "npm:^4.2.9"
     "@types/lodash.compact": "npm:^3.0.9"
     "@types/lodash.debounce": "npm:^4.0.7"
+    "@types/lodash.escaperegexp": "npm:^4.1.9"
     "@types/lodash.groupby": "npm:^4.6.9"
     "@types/lodash.identity": "npm:^3.0.9"
     "@types/lodash.isempty": "npm:^4.4.7"
@@ -45285,6 +45302,7 @@ __metadata:
     lodash.chunk: "npm:^4.2.0"
     lodash.compact: "npm:^3.0.1"
     lodash.debounce: "npm:^4.0.8"
+    lodash.escaperegexp: "npm:^4.1.2"
     lodash.groupby: "npm:^4.6.0"
     lodash.identity: "npm:^3.0.0"
     lodash.isempty: "npm:^4.4.0"