Allow custom input values about vaadin-combo-box HOT 8 CLOSED

Indicators of adding a custom input value:

• User types a value with no match
• User types a value with a partial match/matches
• When the user explicitly saves the value, the custom input is set as the combo-box value
  • Enter key
  • "+ custom_value" as an option in the items list
• When the user tabs the combo-box out of focus, the currently typed input is also set as the combo-box value
  • Tab (or Shift-Tab) or Esc key
  • Pointer click/touch outside the combo-box
• Dropdown is closed always when explicitly saving the combo-box value or tabbing the input out of focus
• Discover & resolve possible future nav conflicts with multi-select feature

Previous discussion available in #24 (closed)

from vaadin-combo-box.

UI design mockup for inputting custom values.

• input a new value that begins with a partial match to existing items
• input a new value with no match to existing items

from vaadin-combo-box.

I like the "enter" icon in the list, it seems clear to me what it means. But the first mockup is confusing to me. I would expect it to select the "bar0" item if I press enter, as it is highlighted with the keyboard focus, and it is also pre-filled in the input. I would perhaps leave the pre-filling part out of the designs in this task, as it is a separate feature (but of course it’s good to keep that in mind when designing this).

The keyboard highlight is a the confusing part here in my opinion. If we have some item with the keyboard focus in the list, then that item should be selected when the user presses enter. But of there is no item highlighted, then the enter icon is a clear indication what will be selected. And that icon can in my opinion be used always together with the keyboard focus style. It might even be enough to separate mouse and keyboard focus/highlight styles?

from vaadin-combo-box.

Also, the second mockup seems perfect to me (apart from the "x" clear button at the bottom of the dropdown, but that part is discussed in https://github.com/vaadin/components-team-tasks/issues/53

from vaadin-combo-box.

What about other keyboard actions related to this? What happens if the user does not press enter when typing a custom value and blurs the field – will we clear the input like currently? That was something I felt like we might want to change, that you could actually just type in the field, and click somewhere else and be sure your input is not lost (which always quite risky for an application’s point of view, as user input should be handled with silk-gloves).

from vaadin-combo-box.

UI design mockup v2

Thanks, I revised the design according to your notes. Also I was thinking that we should be able do with just one indication of what item will selected when hitting enter. And the most generic way would be to have just the gray highlight effect. My original idea was to tie the "enter" icon with just setting a custom value. If it would exist always together with the gray highlight, then we would be emphasizing the same thing twice, right? Therefore I removed the enter icon from the design for now.

Also, removed the "clear X" and input prefill feature from this design.

from vaadin-combo-box.

Custom value stays in the input even when the user blurs the field (clicking outside or pressing tab key).

from vaadin-combo-box.

Implementation work needed.

from vaadin-combo-box.