From 94e195cc17d1a5d6f33da512e5ac49b682302d3d Mon Sep 17 00:00:00 2001
From: Axel RICHARD <axel.richard@obeo.fr>
Date: Tue, 4 Jul 2023 18:19:35 +0200
Subject: [PATCH] [2152] Some characters typed in the filter bar raise
 exception

Bug: https://github.com/eclipse-sirius/sirius-components/issues/2152
Signed-off-by: Axel RICHARD <axel.richard@obeo.fr>
---
 CHANGELOG.adoc                                            | 1 +
 .../sirius-components-trees/src/treeitems/TreeItem.tsx    | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index e9ecc2a124..533e0b264d 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -44,6 +44,7 @@ An absent/empty candidates expression now simply means the widget is empty.
 - https://github.com/eclipse-sirius/sirius-components/issues/2088[#2088] [tree] Fix initial value of the tree filter bar
 - https://github.com/eclipse-sirius/sirius-components/issues/2133[#2133] [workbench] Fix NPE in Related Elements view
 - https://github.com/eclipse-sirius/sirius-components/issues/2112[#2112] [form] Fix the pages filtering in form editor.
+- https://github.com/eclipse-sirius/sirius-components/issues/2152[#2152] [tree] Fix an issue where some characters typed in the filter bar raised exception
 
 === New Features
 
diff --git a/packages/trees/frontend/sirius-components-trees/src/treeitems/TreeItem.tsx b/packages/trees/frontend/sirius-components-trees/src/treeitems/TreeItem.tsx
index b8702dad58..df703e7360 100644
--- a/packages/trees/frontend/sirius-components-trees/src/treeitems/TreeItem.tsx
+++ b/packages/trees/frontend/sirius-components-trees/src/treeitems/TreeItem.tsx
@@ -248,7 +248,13 @@ export const TreeItem = ({
   if (item.imageURL) {
     image = <img height="16" width="16" alt={item.kind} src={httpOrigin + item.imageURL}></img>;
   }
-  const highlightRegExp = new RegExp(`(${textToHighlight})`, 'gi');
+  let highlightRegExp: RegExp | null = null;
+  if (textToHighlight) {
+    // With the RegExp, we keep the searched value in the split result
+    // But we need to escape the special characters from the RegExp
+    const excapedTextToHighlight = textToHighlight.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&');
+    highlightRegExp = new RegExp(`(${excapedTextToHighlight})`, 'gi');
+  }
   let text;
   const onCloseEditingMode = () => {
     setState((prevState) => {