Dropdown filter does not work for array of strings

[sid-6581]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primevue/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=110

CodeSandbox Case (Bug Reports)

Current behavior

When binding a dropdown to an array of strings and enabling filtering, typing anything in the filter box will result in no matches. Filtering only works if the dropdown is bound to an array of objects, with optionLabel set.

Expected behavior

Filtering works on array of strings as well as array of objects.

Minimal reproduction of the problem with instructions

See CodeSandbox example above.

What is the motivation / use case for changing the behavior?

Binding to an array of strings is very common, and I would expect the filtering to work in this scenario.

• Vue version: 3.2.29

• PrimeVue version: 3.11

• Browser: all

[IvanSGurdian]

I just tried this out and was surprised to notice it didn't work with a simple array of strings, I guess we could bind a custom filter to the @filter event, but this should be something the component already handled.

[kayahasa]

same issue for me also

[elliopitas]

got the same issue too

[alex-dow]

3.29.1 also has this issue

[alex-dow]

So, it wasn't clear to me how to use the @filter event to work around this issue. Instead, I've created a wrapper component around Dropdown (and Multiselect) that will generate a list of objects if the supplied list of options are primitives.

const primitiveOptions = computed(() => {
    return !_isObject(props.values[0]);
});

const options = computed(() => {
    if (primitiveOptions.value) {
        // First item in list of available values is a string, so we should assume all values
        // are strings
        return props.values.map((v) => { return { value: v, label: v }});
    } else {
        return props.values;
    }
});

const valueField = computed(() => {
    if (primitiveOptions.value) {
        return 'value';
    } else {
        return props.valueField;
    }
});

const labelField = computed(() => {
    if (primitiveOptions.value) {
        return 'label';
    } else {
        return props.labelField;
    }
});

This gives me the behavior I expect. I can search on lists of primitives, but when I want to work with lists of objects, I get all the same flexibility.

I went this route because it seems you can't stop the default filter behavior? I'm wondering if this means I can't use the filter event for asynchronous searching.... hmm

[tugcekucukoglu]

This stackblitz sample seems to be working. Am I missing something?

[zhekoff316]

I can confirm this is fixed for me - I am using 3.46.0.

[LouisVA]

With the 4.0.0 it does not work for me (array of objects) and the component's name is "Select" now.

No difference if I put filterFields. My array of objects has objects with a 'name' field. If I put filterFields="['name']" or filterFields="name". None work.

edit: My bad, seems like I wasn't proviidng the :filterFields the right way.

[tommie]

(Re. the original v3 issue, I still think #4447 solved that.)