show a specific value among options when no result is found

[sobition]

Hi everyone

I am wondering if there is a solution to return a default value which is one of my options passed to the Select component when nothing matches the user input without writing the search logic from scratch. For example I have
[ {label:"apple", value:"apple"}, {label:"banana", value:"banana"}, {label:"grape", value:"grape"}, {label:"melon", value:"melon"}, ]
but if the user types in something that does not match any of the above I want to show the apple

[manjushsh]

@SobhanAminnejad You can achieve this using noOptionsMessage prop. So basically you can set option and return Custom message.
Code
Example. Refer Last Select

[sobition]

Actually with your response it jumped to my mind to return a <component.Option/> as the message. it looks what I like to be but the only problem is that it's not behaving as an option. Which means by clicking it it won't be selected. I tried to define an onClick method for it too but it's not working. Here is what I tried. Would be thankful if you could help me further

[manjushsh]

@SobhanAminnejad Not a good solution but you can simulate using ref.
Updated Code. Last Select