feat(VSelect): add ignore-accents filtering

Exposes `ignoreAccents` (`boolean | 'query' | 'target'`) on the shared
filter props, so VSelect, VAutocomplete, VCombobox, VDataTable and other
filterable components can match accent-insensitively. `defaultFilter` now
emits index-mapped match ranges, so the highlighted spans stay correct.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: J-Sek

packages/api-generator/src/locale/en/filter.json

@@ -4,6 +4,7 @@
     "customKeyFilter": "Function used on specific keys within the item object. `customFilter` is skipped for columns with `customKeyFilter` specified.",
     "filterKeys": "Array of specific keys to filter on the item.",
     "filterMode": "Controls how the results of `customFilter` and `customKeyFilter` are combined. All modes only apply `customFilter` to columns not specified in `customKeyFilter`.\n\n- **some**: There is at least one match from either the custom filter or the custom key filter.\n- **every**: All columns match either the custom filter or the custom key filter.\n- **union**: There is at least one match from the custom filter, or all columns match the custom key filters.\n- **intersection**: There is at least one match from the custom filter, and all columns match the custom key filters.",
+    "ignoreAccents": "Folds accents before filtering. Use `'query'` to normalize only the search term, `'target'` to normalize only the item value, or `true` for both.",
     "noFilter": "Disables all item filtering."
   }
 }

packages/docs/src/data/new-in.json

@@ -13,6 +13,7 @@
   },
   "VAutocomplete": {
     "props": {
+      "ignoreAccents": "4.2.0",
       "autocomplete": "3.10.0",
       "autoSelectFirst": "3.3.0",
       "clearOnSelect": "3.5.0",
@@ -109,6 +110,7 @@
   },
   "VCombobox": {
     "props": {
+      "ignoreAccents": "4.2.0",
       "alwaysFilter": "3.10.4",
       "autocomplete": "3.10.0",
       "clearOnSelect": "3.5.0",
@@ -154,6 +156,7 @@
   },
   "VDataIterator": {
     "props": {
+      "ignoreAccents": "4.2.0",
       "groupKey": "4.1.0",
       "initialSortOrder": "3.11.0",
       "openAll": "4.1.0",
@@ -168,6 +171,7 @@
   },
   "VDataTable": {
     "props": {
+      "ignoreAccents": "4.2.0",
       "collapseIcon": "3.10.0",
       "expandIcon": "3.10.0",
       "expandStrategy": "4.1.0",
@@ -227,6 +231,7 @@
   },
   "VDataTableVirtual": {
     "props": {
+      "ignoreAccents": "4.2.0",
       "collapseIcon": "3.10.0",
       "expandIcon": "3.10.0",
       "expandStrategy": "4.1.0",
@@ -431,6 +436,7 @@
   },
   "VSelect": {
     "props": {
+      "ignoreAccents": "4.2.0",
       "autocomplete": "3.10.0",
       "listProps": "3.5.0",
       "menuElevation": "4.0.0",
@@ -592,6 +598,7 @@
   },
   "VTreeview": {
     "props": {
+      "ignoreAccents": "4.2.0",
       "hideActions": "3.9.0",
       "hideNoData": "3.10.0",
       "noDataText": "3.10.0",

packages/vuetify/src/composables/__tests__/filter.spec.ts

@@ -1,5 +1,5 @@
 // Composables
-import { defaultFilter, filterItems, useFilter } from '../filter'
+import { createDefaultFilter, defaultFilter, filterItems, useFilter } from '../filter'
 import { transformItem, transformItems } from '../list-items'
 
 // Utilities
@@ -31,6 +31,34 @@ describe('filter', () => {
       // @ts-expect-error
       expect(defaultFilter(text, query)).toStrictEqual(expected)
     })
+
+    it('does not fold accents by default', () => {
+      expect(defaultFilter('café', 'cafe')).toBe(-1)
+    })
+
+    describe('ignoreAccents', () => {
+      it("folds both sides when true ('cafe' finds 'café', ranges map to the original)", () => {
+        expect(createDefaultFilter(true)('café', 'cafe')).toStrictEqual([[0, 4]])
+      })
+
+      it('maps ranges back to a decomposed source string', () => {
+        const decomposed = 'cafe\u0301' // 'cafe' + combining acute => 5 code units
+        expect(decomposed).toHaveLength(5)
+        expect(createDefaultFilter(true)(decomposed, 'cafe')).toStrictEqual([[0, 5]])
+      })
+
+      it("'target' finds accented entries from a plain query", () => {
+        expect(createDefaultFilter('target')('Łódź', 'odz')).toStrictEqual([[1, 4]])
+      })
+
+      it("'target' keeps the query accented", () => {
+        expect(createDefaultFilter('target')('London', 'Łó')).toBe(-1)
+      })
+
+      it("'query' folds an accented query to match plain text", () => {
+        expect(createDefaultFilter('query')('cafe', 'café')).toStrictEqual([[0, 4]])
+      })
+    })
   })
 
   describe('filterItems', () => {

packages/vuetify/src/composables/filter.tsx

@@ -3,11 +3,11 @@
 
 // Utilities
 import { computed, shallowRef, unref, watchEffect } from 'vue'
-import { getPropertyFromItem, propsFactory, wrapInArray } from '@/util'
+import { findMatchRanges, getPropertyFromItem, propsFactory, wrapInArray } from '@/util'
 
 // Types
 import type { PropType, Ref } from 'vue'
-import type { MaybeRef } from '@/util'
+import type { IgnoreAccents, MaybeRef } from '@/util'
 
 /**
  * - boolean: match without highlight
@@ -29,6 +29,7 @@ export interface FilterProps {
   customKeyFilter?: FilterKeyFunctions
   filterKeys?: FilterKeys
   filterMode?: FilterMode
+  ignoreAccents?: IgnoreAccents
   noFilter?: boolean
 }
 
@@ -45,24 +46,23 @@ type FilterResult = {
 }
 
 // Composables
-export const defaultFilter: FilterFunction = (value, query, item) => {
-  if (value == null || query == null) return -1
-  if (!query.length) return 0
-
-  value = value.toString().toLocaleLowerCase()
-  query = query.toString().toLocaleLowerCase()
-
-  const result = []
-  let idx = value.indexOf(query)
-  while (~idx) {
-    result.push([idx, idx + query.length] as const)
+export function createDefaultFilter (ignoreAccents?: IgnoreAccents): FilterFunction {
+  return (value, query) => {
+    if (value == null || query == null) return -1
+    if (!query.length) return 0
+
+    const ranges = findMatchRanges(value.toString(), query.toString(), {
+      ignoreCase: true,
+      ignoreAccents,
+      all: true,
+    })
 
-    idx = value.indexOf(query, idx + query.length)
+    return ranges.length ? ranges : -1
   }
-
-  return result.length ? result : -1
 }
 
+export const defaultFilter: FilterFunction = createDefaultFilter()
+
 function normaliseMatch (match: FilterMatch, query: string): FilterMatchArrayMultiple | undefined {
   if (match == null || typeof match === 'boolean' || match === -1) return
   if (typeof match === 'number') return [[match, match + query.length]]
@@ -78,6 +78,7 @@ export const makeFilterProps = propsFactory({
     type: String as PropType<FilterMode>,
     default: 'intersection',
   },
+  ignoreAccents: [Boolean, String] as PropType<IgnoreAccents>,
   noFilter: Boolean,
 }, 'filter')
 
@@ -90,12 +91,13 @@ export function filterItems (
     default?: FilterFunction
     filterKeys?: FilterKeys
     filterMode?: FilterMode
+    ignoreAccents?: IgnoreAccents
     noFilter?: boolean
   },
 ) {
   const array: FilterResult[] = []
   // always ensure we fall back to a functioning filter
-  const filter = options?.default ?? defaultFilter
+  const filter = options?.default ?? createDefaultFilter(options?.ignoreAccents)
   const keys = options?.filterKeys ? wrapInArray(options.filterKeys) : false
   const customFiltersLength = Object.keys(options?.customKeyFilter ?? {}).length
 
@@ -215,6 +217,7 @@ export function useFilter <T extends InternalItem> (
         default: props.customFilter,
         filterKeys: props.filterKeys,
         filterMode: props.filterMode,
+        ignoreAccents: props.ignoreAccents,
         noFilter: props.noFilter,
       },
     )