Fixed autosuggest input with special characters

lib/src/text-input/Suggestion.tsx

@@ -2,6 +2,19 @@ import React from "react";
 import styled from "styled-components";
 import { SuggestionProps } from "./types";
 
+const transformSpecialChars = (str: string) => {
+  const specialCharsRegex = /[\\*()\[\]{}+?/]/;
+  let value = str;
+  if (specialCharsRegex.test(value)) {
+    const regexAsString = specialCharsRegex.toString().split("");
+    const uniqueSpecialChars = regexAsString.filter((item, index) => regexAsString.indexOf(item) === index);
+    uniqueSpecialChars.forEach((specialChar) => {
+      if (str.includes(specialChar)) value = value.replace(specialChar, "\\" + specialChar);
+    });
+  }
+  return value;
+};
+
 const Suggestion = ({
   id,
   value,
@@ -11,7 +24,8 @@ const Suggestion = ({
   visuallyFocused,
   highlighted,
 }: SuggestionProps): JSX.Element => {
-  const regEx = new RegExp(value, "i");
+  const specialChar = transformSpecialChars(value);
+  const regEx = new RegExp(specialChar, "i");
   const matchedWords = suggestion.match(regEx);
   const noMatchedWords = suggestion.replace(regEx, "");
 

lib/src/text-input/TextInput.stories.tsx

@@ -61,6 +61,7 @@ const countries = [
   "Dominica",
   "Denmark",
   "Djibouti",
+  "*",
 ];
 
 export const Chromatic = () => (
@@ -308,7 +309,11 @@ const AutosuggestListbox = () => {
       <ExampleContainer>
         <Title title="Autosuggest listbox" theme="light" level={2} />
         <ExampleContainer>
-          <Title title="List dialog uses a Radix Popover to appear over elements with a certain z-index" theme="light" level={3} />
+          <Title
+            title="List dialog uses a Radix Popover to appear over elements with a certain z-index"
+            theme="light"
+            level={3}
+          />
           <div
             style={{
               display: "flex",

lib/src/text-input/TextInput.test.js

@@ -44,6 +44,8 @@ const countries = [
   "Djibouti",
 ];
 
+const specialCharacters = ["/", "\\", "*", "(", ")", "[", "]", "+", "?", "*{[]}|"];
+
 describe("TextInput component tests", () => {
   test("Renders with correct error aria attributes", () => {
     const { getByText, getByRole } = render(
@@ -643,6 +645,43 @@ describe("TextInput component synchronous autosuggest tests", () => {
     expect(input.value).toBe("");
     expect(queryByRole("listbox")).toBeFalsy();
   });
+
+  test("Autosuggest escapes special characters", () => {
+    const onChange = jest.fn();
+    const { getAllByText, getByText, getByRole } = render(
+      <DxcTextInput label="Autocomplete Countries" suggestions={specialCharacters} onChange={onChange} />
+    );
+    const input = getByRole("combobox");
+    fireEvent.focus(input);
+    const list = getByRole("listbox");
+    fireEvent.change(input, { target: { value: "/" } });
+    expect(list).toBeTruthy();
+    expect(getAllByText("/").length).toBe(1);
+    fireEvent.change(input, { target: { value: "\\" } });
+    expect(list).toBeTruthy();
+    expect(getAllByText("\\").length).toBe(1);
+    fireEvent.change(input, { target: { value: "*" } });
+    expect(list).toBeTruthy();
+    expect(getAllByText("*").length).toBe(2);
+    fireEvent.change(input, { target: { value: "(" } });
+    expect(list).toBeTruthy();
+    expect(getAllByText("(").length).toBe(1);
+    fireEvent.change(input, { target: { value: ")" } });
+    expect(list).toBeTruthy();
+    expect(getAllByText(")").length).toBe(1);
+    fireEvent.change(input, { target: { value: "[" } });
+    expect(list).toBeTruthy();
+    expect(getAllByText("[").length).toBe(1);
+    fireEvent.change(input, { target: { value: "]" } });
+    expect(list).toBeTruthy();
+    expect(getAllByText("]").length).toBe(1);
+    fireEvent.change(input, { target: { value: "+" } });
+    expect(list).toBeTruthy();
+    expect(getAllByText("+").length).toBe(1);
+    fireEvent.change(input, { target: { value: "?" } });
+    expect(list).toBeTruthy();
+    expect(getAllByText("?").length).toBe(1);
+  });
 });
 
 describe("TextInput component asynchronous autosuggest tests", () => {