From de7fd59113e4666232ee801fe884f5cd89825813 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Fri, 11 Apr 2025 15:23:28 +0530
Subject: [PATCH] Fix dropdown and multiselect breaking when searched with
 special characters

---
 frontend/src/Editor/Components/DropdownV2/utils.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Editor/Components/DropdownV2/utils.js b/frontend/src/Editor/Components/DropdownV2/utils.js
index ed58cbe73d..814b7b341a 100644
--- a/frontend/src/Editor/Components/DropdownV2/utils.js
+++ b/frontend/src/Editor/Components/DropdownV2/utils.js
@@ -52,7 +52,14 @@ export const getInputBackgroundColor = ({ fieldBackgroundColor, darkMode, isLoad
 };
 
 export const highlightText = (text = '', highlight) => {
-  const parts = text?.split(new RegExp(`(${highlight})`, 'gi'));
+  // Escape special regex characters in the highlight string
+  const escapeRegExp = (string) => {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  };
+
+  const safeHighlight = highlight ? escapeRegExp(highlight) : '';
+  const parts = text?.split(new RegExp(`(${safeHighlight})`, 'gi'));
+
   return (
     <span>
       {parts.map((part, index) =>