fix(react/autocomplete): escape all special characters for search text,

closed #217
Mezzanine-UI · Jan 10, 2024 · 8285356 · 8285356
1 parent d39e593
commit 8285356
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/packages/react/src/Form/useAutoCompleteValueControl.ts b/packages/react/src/Form/useAutoCompleteValueControl.ts
@@ -83,7 +83,10 @@ function useAutoCompleteBaseValueControl(props: UseAutoCompleteValueControl) {
   const [searchText, setSearchText] = useState<string>('');
   const [focused, setFocused] = useState<boolean>(false);
 
-  const searchTextReg = new RegExp(searchText.replace(/\\/g, '\\\\'), 'i' );
+  /** escape all special characters */
+  const searchTextReg = new RegExp(searchText
+    .replace(/[|\\{}()[\]^$+*?.]/g, '\\$&')
+    .replace(/-/g, '\\x2d'));
 
   const onFocus = useCallback((focus: boolean) => {
     setFocused(focus);

diff --git a/packages/react/src/Select/AutoComplete.stories.tsx b/packages/react/src/Select/AutoComplete.stories.tsx
@@ -32,6 +32,9 @@ const originOptions: SelectValue[] = [{
 }, {
   id: 'very very very long',
   name: 'very very very long',
+}, {
+  id: '?><!@#$^$&^&',
+  name: '?><!@#$^$&^&',
 }];
 
 export const Basic = () => (