Default filter for <q-select use-input>

[tattdogg]

Hi guys

It would be great to have default on-filter func for <q-select use-input>
It should filter by string value if options is string[]
It should filter by option-label if options is object[]

Why I'm asking? In my project I have around 20 pages. Each page has 50-100 selects.
Luckily I don't need to specify separate on-filter function for each select but I still need to have 2 arrays (original, and filterd) for each.

[pdanpdan]

You can make a composable with all you need for your QSelect, customized as you want

https://codepen.io/pdanpdan/pen/ZEwrdza?editors=0010

[pdanpdan]

I improved it a little: https://pdanpdan.github.io/posts/post_003.html

[tattdogg]

Wow! You solution is perfect at the current stage 👍
Anyway...
It still requires to declare a variable for each input.
It would be great to have this from the box.

[pdanpdan]

Not really. You only need one for each set of source options and filtering method (so basically the same as the options array).

[tattdogg]

I have 2 TS errors in your code:

1. props['loading'] in const keepOpen
   Element implicitly has an 'any' type because expression of type '"loading"' can't be used to index type 'Pick<QSelectProps, K>'.
   Property 'loading' does not exist on type 'Pick<QSelectProps, K>'.

2. const useProps
   Type '{ options: Ref<T[]> | ShallowRef<T[]>; onFilter(search: string, doneFn: (callbackFn: () => void, afterFn?: ((ref: QSelect) => void) | undefined) => void, abortFn: () => void): void; }' is not assignable to type 'Pick<QSelectProps, K> & { options: ShallowRef<readonly any[] | undefined>; onFilter: ((inputValue: string, doneFn: (callbackFn: () => void, afterFn?: ((ref: QSelect) => void) | undefined) => void, abortFn: () => void) => void) | undefined; loading?: Ref<...> | undefined; }'.
   Type '{ options: Ref<T[]> | ShallowRef<T[]>; onFilter(search: string, doneFn: (callbackFn: () => void, afterFn?: ((ref: QSelect) => void) | undefined) => void, abortFn: () => void): void; }' is not assignable to type 'Pick<QSelectProps, K>'.

I'm using:
"quasar": "^2.14.1",
"typescript": "^5.3.3"

[pdanpdan]

I found the problem and fixed them in https://pdanpdan.github.io/posts/post_003.html
Thank you for reporting

[tattdogg]

I also using ref options... in this case filter removes filtered options...
I don't understand why @metalsadman marked your code as answer
I was asking whether it's possible to add this functionality to the component...

[pdanpdan]

Make a repro - start from this and share url (the same for the comment above):
updated url

https://pdanpdan.github.io/quasar-play/?file=src%2FuseFilteredSelect.ts&preview=t&previewMode=preview&editor=codemirror#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

[pdanpdan]

I found the problem and fixed them in https://pdanpdan.github.io/posts/post_003.html
Thank you for reporting