React-select: First item of the menu is selected by hitting enter by default even if the input value in the container does not match it

[fydsa]

Hi everybody,

I am using AsyncSelect, and I type sth in the container and then some options appear in the menu, but the problem is that even in the case that what I've typed in the container does not match any of the options, hitting enter cause selecting the first item of the options. Can anyone help me to find a way to prevent this behavior? I really appreciate any help.

Many thanks in advance.

[ebonow]

Greetings @fydsa ,

I would love to help, but am not certain I understand how you are seeing this behavior.

This example might provide some clues as to why you are seeing this behavior. Two important things to look at are checking that you are managing the filtering and then calling the callback when the input returns.

If this doesn't help, then perhaps you could include an example to help me better understand why it isn't working as expected.

[fydsa]

Greetings @fydsa ,

I would love to help, but am not certain I understand how you are seeing this behavior.

This example might provide some clues as to why you are seeing this behavior. Two important things to look at are checking that you are managing the filtering and then calling the callback when the input returns.

If this doesn't help, then perhaps you could include an example to help me better understand why it isn't working as expected.

Thanks for your reply. Well, actually, the problem is that I hitting enter in the container cause selecting the first item of the option list even if nothing is typed in the container input field. Or for instance, in the example you provided, I type "q" in input field and no option is matched with it, and then I out focus the input field and the menu is closed and the first item of the list which in this case is "ocean" is appeared in the input container as the selected value. I am looking for a way to prevent this behavior.

Thank you a again