fix(InputMenu/SelectMenu): escape regexp before search

Resolves #2308
nuxt · Oct 10, 2024 · c68ba76 · c68ba76
1 parent dd0d055
commit c68ba76
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/runtime/components/forms/InputMenu.vue b/src/runtime/components/forms/InputMenu.vue
@@ -401,20 +401,26 @@ export default defineComponent({
       lazy: props.searchLazy
     })
 
+    function escapeRegExp (string: string) {
+      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+    }
+
     const filteredOptions = computed(() => {
       if (!query.value || debouncedSearch) {
         return options.value
       }
 
+      const escapedQuery = escapeRegExp(query.value)
+
       return options.value.filter((option: any) => {
         return (props.searchAttributes?.length ? props.searchAttributes : [props.optionAttribute]).some((searchAttribute: any) => {
           if (['string', 'number'].includes(typeof option)) {
-            return String(option).search(new RegExp(query.value, 'i')) !== -1
+            return String(option).search(new RegExp(escapedQuery, 'i')) !== -1
           }
 
           const child = get(option, searchAttribute)
 
-          return child !== null && child !== undefined && String(child).search(new RegExp(query.value, 'i')) !== -1
+          return child !== null && child !== undefined && String(child).search(new RegExp(escapedQuery, 'i')) !== -1
         })
       })
     })

diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
@@ -485,20 +485,26 @@ export default defineComponent({
       lazy: props.searchableLazy
     })
 
+    function escapeRegExp (string: string) {
+      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+    }
+
     const filteredOptions = computed(() => {
       if (!query.value || debouncedSearch) {
         return options.value
       }
 
+      const escapedQuery = escapeRegExp(query.value)
+
       return options.value.filter((option: any) => {
         return (props.searchAttributes?.length ? props.searchAttributes : [props.optionAttribute]).some((searchAttribute: any) => {
           if (['string', 'number'].includes(typeof option)) {
-            return String(option).search(new RegExp(query.value, 'i')) !== -1
+            return String(option).search(new RegExp(escapedQuery, 'i')) !== -1
           }
 
           const child = get(option, searchAttribute)
 
-          return child !== null && child !== undefined && String(child).search(new RegExp(query.value, 'i')) !== -1
+          return child !== null && child !== undefined && String(child).search(new RegExp(escapedQuery, 'i')) !== -1
         })
       })
     })