Combobox (multiple prop) overwrites original input

[DogAndHerDude]

Have been trying to make this work for a while using all kinds of state tracking on my component, but it just too convoluted to be practical.

The issue is that I'm using <ComboxBox multiple>...</Combobox>. The user is allowed to enter anything in there, and have the combobox provide suggestions. However, when blurring the user input it overrides user input with the initial suggestion. Problem is that those are just suggestions and any value the user provides is actually fine.

Second, that when no suggestion is found and pressing the Enter key the input gets cleared. It will clear to either all of the input if no prior value was entered, or it will clear the freshly entered value.

Example: Caffeine Free, whatever else turns to Caffeine Free

[DogAndHerDude]

Actually, it seems to happen without multiple too. Just having a value in the input and pressing enter will select the default value from the given suggestion list. Or even if a suggestion is not found, it will then select the first value in the suggestion list. Odd behaviour.

[DogAndHerDude]

Alright, so I figured out what's happening.

When the user receives a suggestion, the first matching ComboBox.Option is already active, thus pressing Enter or blurring triggers the onChange function.

However, if user has a value entered into the field, that is not part of the suggestion, but still a valid value, the value gets thrown out, because new value applied is the array with the selected options.

I've worked around this using obtuse logic to controler onBlur, onKeyDown event handlers. However, now the user cannot confirm selected option using Enter, which is not the biggest issue but I feel the usability suffers.