From 2049e46fd5b115c6bc26f2c539c1f60500551512 Mon Sep 17 00:00:00 2001
From: Celia Amador <camadorg@redhat.com>
Date: Fri, 1 Aug 2025 15:05:09 +0200
Subject: [PATCH] EDM-1939: Prevent crash when users type special characters

---
 .../components/Device/DevicesPage/DeviceToolbarFilters.tsx  | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/libs/ui-components/src/components/Device/DevicesPage/DeviceToolbarFilters.tsx b/libs/ui-components/src/components/Device/DevicesPage/DeviceToolbarFilters.tsx
index 8a9034f18..724319da1 100644
--- a/libs/ui-components/src/components/Device/DevicesPage/DeviceToolbarFilters.tsx
+++ b/libs/ui-components/src/components/Device/DevicesPage/DeviceToolbarFilters.tsx
@@ -40,6 +40,9 @@ type LabelFleetSelectorProps = {
   placeholder?: string;
 };
 
+// Escapes special characters (eg. 'hello.world' becomes 'hello\\.world')
+const escapeRegExp = (text: string) => text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
 const LabelFleetResults = ({
   filterText,
   allLabels,
@@ -56,7 +59,8 @@ const LabelFleetResults = ({
   allLabels: FlightCtlLabel[];
 }) => {
   const { t } = useTranslation();
-  const regexp = React.useMemo(() => new RegExp(`(${filterText})`, 'g'), [filterText]);
+
+  const regexp = React.useMemo(() => new RegExp(`(${escapeRegExp(filterText)})`, 'g'), [filterText]);
 
   const searchHighlighter = React.useCallback(
     (text: string) => {