Enhance OuiComboBox - refine type to search error handling

[KrooshalUX]

Problem:
Currently, OuiComboBox offers a variation for single selection. A user can either open the selectable UI and scroll to select a value, or search within the combo box to find a match for their query, and can make a selection, and the selectable portion of combo box is dismissed, retaining the selected value in the search field.

However, if the entered search does not match any values, the user is presented with an error state, and the search box is not cleared when the combo box search results are closed, retaining the error state. This feels clunky and like "yelling at the user", and could be further refined.

Solution:
As a user is typing, it is valid to present an error state when no match is found. However, if no selection is made because no value was selected, when the focus is lost from the input box, the value should be cleared or returned to the last valid selection. Provide a prop to builders to set this interaction (clear or returned).

In addition, it is not immediately obvious that search can be performed in the combo box, and I propose adding a prop to allow OuiIcon to be turned on/off by the builder.

Tasks:

• (OUI Component Refresh) Combo Box- Refine search interactions by providing a prop to allow builders to select clear or return to last valid selection #127
• (OUI Component Refresh) Add prop to set OuiIcon type=search true or false #130
• (OUI Docs) Combo Box #98

[ashwin-pc]

If this is supposed to behave as a select box, it should always have one of its options always selected, which means that

1. I can provide a default value (This already has that)
2. Once I select a value, I should not be able to clear it.I should only be able to select between other values. By clearing the value when the user loses focus for an incorrect value, I lose this behavior

[KrooshalUX]

@ashwin-pc good call out with # 2, I have updated the issue. Since its appropriate in some cases to clear the value, and other cases to fall back to the last valid selection, I have requested a prop to be added that would allow builders to configure the interaction.

[kaddy645]

I thought , it allows us to select multiple options so default option won't be there. is it supposed to behave like "select" element in HTML ? There are different variant of Combo box, some allow us to add non existing option as custom option. so which one exactly we are talking about ?

[KrooshalUX]

In the case of selecting multiples or a single (which is the use case for @ashwin-pc ) it is still weird when a value that is entered doesn't match anything. There is another implementation where if a string doesn't match a value, the user can create the value that way.

I am not sure how the component is constructed, but I do think we need to touch up the interaction.

[KrooshalUX]

According to @ashwin-pc a default value can be set already. Is this accurate ?

[kaddy645]

Default value here, means initially we can set selectedOptions, but once user start entering anything right or wrong, that value will get overridden and we will have retain that .

[KrooshalUX]

@kaddy645 I am not sure why we must retain that. Its leading to a poor user experience and is likely to increase errors.
The request is to clear the value (or at least allow clearing the value to be configurable) if it doesn't match unless the component is configured for custom options (renderOption & OuiComboBoxOptionOption)

So, while this UI is correct while the focus is on the input box:

this is not ideal once the focus is lost: