fix: add removeKeywordFromQuery (vs backtracking) + remove initialFilters

Author: danielroe

app/composables/useStructuredFilters.ts

@@ -97,10 +97,31 @@ export function hasSearchOperators(parsed: ParsedSearchOperators): boolean {
 }
 
 /**
- * Escape special regex characters in a string
+ * Remove a keyword from a search query string.
+ * Handles kw:xxx and keyword:xxx formats, including comma-separated values.
  */
-function escapeRegExp(str: string): string {
-  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+export function removeKeywordFromQuery(query: string, keyword: string): string {
+  const operatorRegex = /\b((?:kw|keyword):)(\S+)/gi
+  const lowerKeyword = keyword.toLowerCase()
+
+  let result = query.replace(operatorRegex, (match, prefix: string, value: string) => {
+    const values = value.split(',').filter(Boolean)
+    const filtered = values.filter(v => v.toLowerCase() !== lowerKeyword)
+
+    if (filtered.length === 0) {
+      // All values removed — drop the entire operator
+      return ''
+    }
+    if (filtered.length === values.length) {
+      // Nothing was removed — keep original
+      return match
+    }
+    return `${prefix}${filtered.join(',')}`
+  })
+
+  // Clean up double spaces and trim
+  result = result.replace(/\s+/g, ' ').trim()
+  return result
 }
 
 interface UseStructuredFiltersOptions {
@@ -432,7 +453,9 @@ export function useStructuredFilters(options: UseStructuredFiltersOptions) {
   }
 
   function addKeyword(keyword: string) {
-    if (!filters.value.keywords.includes(keyword)) {
+    const lowerKeyword = keyword.toLowerCase()
+    const alreadyExists = filters.value.keywords.some(k => k.toLowerCase() === lowerKeyword)
+    if (!alreadyExists) {
       filters.value.keywords = [...filters.value.keywords, keyword]
       const newQ = searchQuery.value
         ? `${searchQuery.value.trim()} keyword:${keyword}`
@@ -444,45 +467,21 @@ export function useStructuredFilters(options: UseStructuredFiltersOptions) {
   }
 
   function removeKeyword(keyword: string) {
-    filters.value.keywords = filters.value.keywords.filter(k => k !== keyword)
-
-    // Need to handle both kw:xxx and keyword:xxx formats
-    // Also handle comma-separated values like kw:foo,bar,baz
-    let newQ = searchQuery.value
-
-    // First, try to remove standalone keyword:xxx or kw:xxx
-    // Match: (kw|keyword):value followed by space or end of string
-    newQ = newQ.replace(new RegExp(`\\b(?:kw|keyword):${escapeRegExp(keyword)}(?=\\s|$)`, 'gi'), '')
-
-    // Handle comma-separated values: remove the keyword from within a list
-    // e.g., "kw:foo,bar,baz" should become "kw:foo,baz" if removing "bar"
-    newQ = newQ.replace(
-      new RegExp(
-        `\\b((?:kw|keyword):)([^\\s]*,)?${escapeRegExp(keyword)}(,[^\\s]*)?(?=\\s|$)`,
-        'gi',
-      ),
-      (match, prefix, before, after) => {
-        const beforePart = before?.replace(/,$/, '') ?? ''
-        const afterPart = after?.replace(/^,/, '') ?? ''
-        if (!beforePart && !afterPart) {
-          // This was the only keyword in the operator
-          return ''
-        }
-        // Reconstruct with remaining keywords
-        const separator = beforePart && afterPart ? ',' : ''
-        return `${prefix}${beforePart}${separator}${afterPart}`
-      },
-    )
+    const lowerKeyword = keyword.toLowerCase()
+    filters.value.keywords = filters.value.keywords.filter(k => k.toLowerCase() !== lowerKeyword)
 
-    // Clean up any double spaces and trim
-    newQ = newQ.replace(/\s+/g, ' ').trim()
+    // Remove the keyword from the search query string.
+    // Handles both kw:xxx and keyword:xxx formats, including comma-separated values.
+    const newQ = removeKeywordFromQuery(searchQuery.value, keyword)
 
     router.replace({ query: { ...route.query, q: newQ || undefined } })
     if (searchQueryModel) searchQueryModel.value = newQ
   }
 
   function toggleKeyword(keyword: string) {
-    if (filters.value.keywords.includes(keyword)) {
+    const lowerKeyword = keyword.toLowerCase()
+    const exists = filters.value.keywords.some(k => k.toLowerCase() === lowerKeyword)
+    if (exists) {
       removeKeyword(keyword)
     } else {
       addKeyword(keyword)

app/pages/org/[org].vue

@@ -57,9 +57,6 @@ const {
   setSort,
 } = useStructuredFilters({
   packages,
-  initialFilters: {
-    ...parseSearchOperators(normalizeSearchParam(route.query.q)),
-  },
   initialSort: (normalizeSearchParam(route.query.sort) as SortOption) ?? 'updated-desc',
 })
 

app/pages/search.vue

@@ -143,9 +143,6 @@ const {
   clearAllFilters,
 } = useStructuredFilters({
   packages: resultsArray,
-  initialFilters: {
-    ...parseSearchOperators(normalizeSearchParam(route.query.q)),
-  },
   initialSort: 'relevance-desc', // Default to search relevance
   searchQueryModel: searchQuery,
 })

test/nuxt/composables/useStructuredFilters.spec.ts

@@ -1,5 +1,9 @@
 import { describe, expect, it } from 'vitest'
-import { hasSearchOperators, parseSearchOperators } from '~/composables/useStructuredFilters'
+import {
+  hasSearchOperators,
+  parseSearchOperators,
+  removeKeywordFromQuery,
+} from '~/composables/useStructuredFilters'
 
 describe('parseSearchOperators', () => {
   describe('basic operator parsing', () => {
@@ -247,3 +251,104 @@ describe('keyword clearing scenarios', () => {
     }
   })
 })
+
+describe('removeKeywordFromQuery', () => {
+  describe('standalone keyword removal', () => {
+    it('removes standalone kw:value', () => {
+      expect(removeKeywordFromQuery('test kw:react', 'react')).toBe('test')
+    })
+
+    it('removes standalone keyword:value', () => {
+      expect(removeKeywordFromQuery('test keyword:react', 'react')).toBe('test')
+    })
+
+    it('removes keyword at start of query', () => {
+      expect(removeKeywordFromQuery('kw:react test', 'react')).toBe('test')
+    })
+
+    it('removes keyword when it is the entire query', () => {
+      expect(removeKeywordFromQuery('kw:react', 'react')).toBe('')
+    })
+
+    it('is case-insensitive', () => {
+      expect(removeKeywordFromQuery('kw:React', 'react')).toBe('')
+      expect(removeKeywordFromQuery('kw:react', 'React')).toBe('')
+      expect(removeKeywordFromQuery('kw:REACT', 'react')).toBe('')
+    })
+  })
+
+  describe('comma-separated keyword removal', () => {
+    it('removes keyword from middle of comma list', () => {
+      expect(removeKeywordFromQuery('kw:foo,bar,baz', 'bar')).toBe('kw:foo,baz')
+    })
+
+    it('removes keyword from start of comma list', () => {
+      expect(removeKeywordFromQuery('kw:foo,bar,baz', 'foo')).toBe('kw:bar,baz')
+    })
+
+    it('removes keyword from end of comma list', () => {
+      expect(removeKeywordFromQuery('kw:foo,bar,baz', 'baz')).toBe('kw:foo,bar')
+    })
+
+    it('removes only keyword in comma list (drops operator)', () => {
+      expect(removeKeywordFromQuery('test kw:react', 'react')).toBe('test')
+    })
+
+    it('removes keyword from two-item list', () => {
+      expect(removeKeywordFromQuery('kw:foo,bar', 'foo')).toBe('kw:bar')
+      expect(removeKeywordFromQuery('kw:foo,bar', 'bar')).toBe('kw:foo')
+    })
+
+    it('is case-insensitive within comma list', () => {
+      expect(removeKeywordFromQuery('kw:Foo,Bar,Baz', 'bar')).toBe('kw:Foo,Baz')
+    })
+  })
+
+  describe('duplicate keyword removal', () => {
+    it('removes all occurrences across multiple operators', () => {
+      expect(removeKeywordFromQuery('kw:react keyword:react', 'react')).toBe('')
+    })
+
+    it('removes from both standalone and comma-separated', () => {
+      expect(removeKeywordFromQuery('kw:react,vue keyword:react', 'react')).toBe('kw:vue')
+    })
+
+    it('removes duplicate within same comma list', () => {
+      expect(removeKeywordFromQuery('kw:react,vue,react', 'react')).toBe('kw:vue')
+    })
+  })
+
+  describe('preserves unrelated content', () => {
+    it('preserves other operators', () => {
+      expect(removeKeywordFromQuery('name:foo kw:react desc:bar', 'react')).toBe(
+        'name:foo desc:bar',
+      )
+    })
+
+    it('preserves free text', () => {
+      expect(removeKeywordFromQuery('hello world kw:react', 'react')).toBe('hello world')
+    })
+
+    it('does not remove substring matches', () => {
+      expect(removeKeywordFromQuery('kw:react-hooks', 'react')).toBe('kw:react-hooks')
+    })
+
+    it('does not remove keyword that is a prefix of another in comma list', () => {
+      expect(removeKeywordFromQuery('kw:react,react-hooks', 'react')).toBe('kw:react-hooks')
+    })
+
+    it('does not modify query when keyword is not present', () => {
+      expect(removeKeywordFromQuery('kw:vue,angular test', 'react')).toBe('kw:vue,angular test')
+    })
+  })
+
+  describe('whitespace handling', () => {
+    it('collapses multiple spaces after removal', () => {
+      expect(removeKeywordFromQuery('test  kw:react  more', 'react')).toBe('test more')
+    })
+
+    it('trims leading and trailing spaces', () => {
+      expect(removeKeywordFromQuery('  kw:react  ', 'react')).toBe('')
+    })
+  })
+})