[Feature request] Allow adding some related keywords to dropdown items so that they can be searched based on those keywords

[Bishal Niroula]

Description

[Feature request] Allow adding some related keywords to dropdown items so that they can be searched based on those keywords

chakra-react-select Version

latest

Link to Reproduction

No response

TypeScript?

• Yes I use TypeScript

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

Operating System

• macOS
• Windows
• Linux
• iOS/iPadOS
• Android

Additional Information

No response

[Chris Sandvik]

This package has nothing to do with the filtering logic used by react-select, so this isn't something that will be added to this package. However, custom filtering logic is already something supported by the core package:

Custom Filter logic

While React-Select assumes a standard way of filtering the menu on search, our api allows you to customise that filtering logic in various ways.

createFilter function

React-Select exports a createFilter function that returns a filterOption method. By using this, users can pick and choose bits of the filtration logic to customize, without having to rewrite the logic wholesale.

// default filter configuration
ignoreCase: true,
ignoreAccents: true,
matchFrom: 'any',
stringify: option => `${option.label} ${option.value}`,
trim: true,

...

filterOption

If you really would like to rewrite the filtration logic from the ground up, simply declare a new filterOption function to be passed in as a prop to react-select. For details on the shape of the filterOption prop, please see the proptypes in the api docs here.

— https://react-select.com/advanced#custom-filter-logic