fix(InputMenu/SelectMenu): escape regexp before search

nuxt · Oct 10, 2024 · 7c21dde · 7c21dde
1 parent 0f9ac87
commit 7c21dde
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
@@ -127,7 +127,7 @@ import { useFormField } from '../composables/useFormField'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 import UChip from './Chip.vue'
-import { get } from '../utils'
+import { get, escapeRegExp } from '../utils'
 
 defineOptions({ inheritAttrs: false })
 
@@ -175,16 +175,17 @@ function filterFunction(items: ArrayOrWrapped<AcceptableValue>, searchTerm: stri
   }
 
   const fields = Array.isArray(props.filter) ? props.filter : ['label']
+  const escapedSearchTerm = escapeRegExp(searchTerm)
 
   return items.filter((item) => {
     if (typeof item !== 'object') {
-      return String(item).search(new RegExp(searchTerm, 'i')) !== -1
+      return String(item).search(new RegExp(escapedSearchTerm, 'i')) !== -1
     }
 
     return fields.some((field) => {
       const child = get(item, field)
 
-      return child !== null && child !== undefined && String(child).search(new RegExp(searchTerm, 'i')) !== -1
+      return child !== null && child !== undefined && String(child).search(new RegExp(escapedSearchTerm, 'i')) !== -1
     })
   }) as ArrayOrWrapped<T>
 }

diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
@@ -117,7 +117,7 @@ import { useFormField } from '../composables/useFormField'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 import UChip from './Chip.vue'
-import { get } from '../utils'
+import { get, escapeRegExp } from '../utils'
 
 const props = withDefaults(defineProps<SelectMenuProps<T>>(), {
   search: true,
@@ -167,16 +167,17 @@ function filterFunction(items: ArrayOrWrapped<AcceptableValue>, searchTerm: stri
   }
 
   const fields = Array.isArray(props.filter) ? props.filter : ['label']
+  const escapedSearchTerm = escapeRegExp(searchTerm)
 
   return items.filter((item) => {
     if (typeof item !== 'object') {
-      return String(item).search(new RegExp(searchTerm, 'i')) !== -1
+      return String(item).search(new RegExp(escapedSearchTerm, 'i')) !== -1
     }
 
     return fields.some((field) => {
       const child = get(item, field)
 
-      return child !== null && child !== undefined && String(child).search(new RegExp(searchTerm, 'i')) !== -1
+      return child !== null && child !== undefined && String(child).search(new RegExp(escapedSearchTerm, 'i')) !== -1
     })
   }) as ArrayOrWrapped<T>
 }

diff --git a/src/runtime/utils/index.ts b/src/runtime/utils/index.ts
@@ -59,3 +59,7 @@ export function looseToNumber(val: any): any {
   const n = Number.parseFloat(val)
   return Number.isNaN(n) ? val : n
 }
+
+export function escapeRegExp(string: string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}