How to perform search only on label (text) in react-multiselect-checkboxes

Question

I am using "react-multiselect-checkboxes" plugin. The options passed to the dropdown have 'label' and 'value' which is common to any dropdown. However, when I supply a search term, the search result returns all the options that contain the search term in either 'label' or 'value'.

For example, from the below JSON array, it will return the first two elements if one searches for the term 'ee' because 'value' in the second element of the array contains 'ee':

    {
        "value": "bab11c73-7dc6-4949-a856-e6fbd7e5540f",
        "label": "Sandeep"
    },
    {
        "value": "3ce374c3-2843-4d64-b088-970e4nb3f7ee",
        "label": "Arvind"
    },
    {
        "value": "eb1a6465-da5e-4be0-b48d-7767623cd888",
        "label": "Ayush"
    }
]

This result is incorrect from the end-user point of view. How can we restrict the react-multiselect-checkboxes to search in only the label?

Answer 1

react-multiselect-checkboxes is based on react-select which by default searches in both value and label.

A fix for this was mentioned in this issue https://github.com/JedWatson/react-select/issues/4393#issuecomment-765396267

by default the component searches through both value and label. If you want to only search through the label you have to use the filterOption prop in conjunction with the createFilter function exposed from the package. This will create a new filter function based on a configuration you provide.

So I don't believe you can fix this out of the box with react-multiselect-checkboxes, and you would have to make some changes yourself.

If it's an option, consider using another lib that allows you to customize this