ComboBox new item and selection handling are inconsistent

[Ansku]

#9071 fixed some of the issues when typing a new item to a ComboBox that allows such things and then exiting the field via click instead of tabulator without pressing enter, but there are some problematic cases left, and some are broken with both approaches.

Depending on the order of things you do (e.g. trying to add a new item before or after manual selection of an existing value, re-trying after failure etc.), entering text and moving out of the field without pressing enter can lead to any of these cases:

• new item isn't added, old item is restored to text field
• new item is added, old item is restored to text field
• new item is added and stays in the text field but isn't selected
• new item is added and selected (only in 8.1.6 when using tabulator)

Tested in 8.1.0, 8.1.6, 8.2.0.alpha2, and current master branch using the test for #9774

[tsuoanttila]

@jouni what should be the best UX for handling new item adding and selecting? Is it something mentioned in the list from @Ansku or something else?

[sirbris]

Shouldn't it be the last one from the list (of course also when user clicks anywhere else, and not just on tab out)? It would then behave like a text field and the shown text also equals the selected value and there won't be any confusion, imho.

[gordenzahn]

I would have to agree with Moritz!!!

[jouni]

Clicking outside and pressing tab are both considered as the same action – blurring the field.

I’ll mockup visual specs for all of the relevant states.

[jouni]

Sigh… I ended up drafting an almost complete state flow chart for combo box as a result, how it should behave (more applicable to Element <vaadin-combo-box> than Framework ComboBox). It leaves some ambiguity, but I hope it’ll be useful still.

It probably contains many differences compared to the current behavior. We don’t want to “fix” all of them in the scope of this issue, to limit the amount of breaking changes.

The relevant parts, which affect this issue regarding the “new item handler”:

• As stated earlier, clicking outside and tabbing out of the field are the same state transition: Blur
• When no item is focused in the list (i.e. a custom value is typed), Enter and Blur:
  • without a new item handler, revert the input value to the currently selected item (which can be null/empty)
  • with a new item handler, add the string as a new item and set that as the selected item
• Esc reverts the input value to the currently selected item, with one exception, which is when reverting from a focused item to the filter text