[Bug Report][3.8.1] Autocomplete custom-filter displays broken results when function returns index of the match

[joshas]

Environment

Vuetify Version: 3.8.1
Last working version: 3.7.19
Vue Version: 3.5.13
Browsers: Firefox 137.0
OS: Linux x86_64

Steps to reproduce

Enter "Ca" in search, observe that matched part of string is correctly highlighted.

Expected Behavior

Enter "a". All "a" letters in found results should be highlighted.

Actual Behavior

Strings in results are modified to include extra repeating parts of same strings. e.g. "Colorolorado" :)

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

Very likely, that custom-filter prop instructions have to be updated and I'm just using custom filter function incorrectly, after "support multiple match highlighting" feature landed in 9da6442

[MatthewAry]

Hey there. The issue here is not that it's not highlighting all the values with the specific letter but that your filter function is not returning the correct values. Now, an argument could be made that this is a bug, but I believe the purpose of the custom-filter function prop is to allow you to inform the component how to filter on an object or something else. Highlighting is kind of a benefit. I took your code and compared it to the defaultFilter function https://play.vuetifyjs.com/playgrounds/X5pqYg and it seems that highlighting works by providing arrays that represent the range you want to have highlighted in the matched result, if not a match it's a -1. The spec also says that it will accept a boolean as a filter result, but you won't get highlighting with that.

What is your use case here that requires you to have a custom filter function? If you're trying to filter on an object with a custom item slot, you'd have to implement your own variant of highlighting.

[KaelWD]

It is a bug, I did [start, length] instead of [start, end]