Search with null/undefined values breaks rendering

[joaomarcelofm]

Describe the bug

When typing directly on the multi-select component, an error us thrown if any of the labels are null/undefined. There may be reasons for this (data-side), and, in our case, we're using slots to render something better for the user.

However, the error is thrown and causes the component to rerender or break fully.

Screen.Recording.2024-01-24.at.07.35.21.mov

Error:

The error happens here:

isOptionMatched: function isOptionMatched(option) {
      return this.isValidOption(option) && this.getOptionLabel(option).toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale));
},

Reproducer

https://codesandbox.io/p/devbox/multi-select-filter-null-bug-s67hsy?file=%2Fsrc%2FApp.vue%3A10%2C28

PrimeVue version

3.45.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

No response

Steps to reproduce the behavior

1. Open the multi-select component
2. Start typing random things directly (not on filter box)
3. Error will appear

Expected behavior

Error is handled gracefully with the nullability of labels and doesn't break the rendering.

[mertsincan]

Thanks a lot for your report! We'll fix it asap.