ui5-combobox: Add selectedComboBoxItem property/attribute

Is your feature request related to a problem? Please describe.
Currently it's inconvenient to get the selected ui5-cb-item, because there is no selectedComboBoxItem prop/attribute as it is in e.g. the ui5-select component.

Describe the solution you'd like
I would like to have a property that receives the selected item, which then can be accessed using the change event.

The idea of the combobox is that you will get a free text to type and a few suggestions which might fit, but in the end the text is important. Therefore I decided to leave that API like that. In case you want to preselect a value from the list - feel free to set its text property as value attribute of the combo. Does this solve your issue?

@MapTo0

Hi @MapTo0

shouldn't the ComboBox behave more or less like the MultiComboBox just with a single select? Maybe you could introduce a second event, similar to the UI5 implementation.

What do you think?

"The idea of the combobox is that you will get a free text to type and a few suggestions which might fit, but in the end the text is important"

In my experience the answer to that question is no, it is not the text that is important. Way more often then not the combo box is used to display a look up list of some kind where you present the names to the user but the application needs the ID's of their selection.
Eg
New York Brazil

The user is going to pick a city name, but the app needs the id to perform the next operation such as update the database, or to fetch all hospitals where cityId=2 etc.

Isn't this the most common pattern for others? I agree with the original poster that this element is missing THE fundamental property. The combobox should either have a property called "selectedValue" which contains the values attribute of the selected item.

Or mayber better, a "selectedIndex" property which provides the index of the selected item.

or...both

These guys do a pretty good job, and they provide both.
https://component.kitchen/elix/AutoCompleteComboBox

Should I start another thread to request the ability to set an item as selected. Maybe I am missing something but I set an item as selected=true and it had no effect on the control.

We will discuss this internally and get back to you. I am adding that to the checklist for RC 8.

This might help with some of the use cases mentioned above:

#2090

@Lukas742

Hello @Lukas742 ,
Hello @chisholmd ,

As Martin pointed out, the selectionChange event already might help to cover some cases.
In addition, we were thinking that we might expose a read only getter (like in the Select - selectedOption) which will return the value of the last selected item (selected through the list, or confirmed with enter key) and will be cleared when user starts typing.

What do you think about this and do you think this will be enough to cover your use cases?

Thanks,
Nikolay

@nikolay-kolarov

Hi @nikolay-kolarov

thanks for the response. What we want to achieve is selecting a ComboBoxItem by a given ID. Right now we can only pass a value to the ComboBox so we currently manually need to find the value to the corresponding ID. A selected attribute on the ComboBoxItem would still be the easiest way to achieve this, in my opinion.

@Lukas742

Hi @Lukas742

We've discussed this issue thoroughly several times, re-evaluating the pros/cons, and every time we reach the same conclusion - that we should not have a selected property on the ComboBoxItem.

However, we believe that the enhancement we're suggesting (selectedItem property on the ComboBox itself) would be the closest thing to what you want.

Let me start by explaining how you would potentially use it:

<ui5-combo-box id="cb" value="Argentina">
  <ui5-cb-item id="alg" text="Algeria"></ui5-cb-item>
  <ui5-cb-item id="arg" text="Argentina"></ui5-cb-item>
</ui5-combo-box>

There would be a get selectedItem on the ComboBox, so:

cb.selectedItem.id; // "arg"

(would return the id of the selected item, if any)

To set a ComboBoxItem by id, f.e. "arg", you would:

cb.value = document.querySelector("#cb > #arg").text;

(as before).

Now to why we don't want to introduce a selected property:

for ComboBox the value property is the one and only source of truth.

If we introduced a selectedItem metadata property (not just a getter), then we would have ambiguity. This is a mistake we've done in the past with other libraries that we don't want to repeat. What would happen if you set value to "Argentina" and selectedOption to some other country? We'd need to have documentation and logic describing which one takes precedence. Furthermore, we can't for example "fix" one or the other property (f.e. if selectedOption does not correspond to value, we set value to the text of the selected option or vice versa) as properties are owned by the app and we can't internally synchronize them - only user interaction can change a property.

Although it may seem so initially, ComboBox is not like MultiComboBox, reduced to a single selection.

MultiComboBox has both value (what the user has typed) and a list of selected options (selected property on the options). ComboBox only has value. For MultiComboBox this does not introduce ambiguity - value is what is currently typed in the input field, but unless the user has clicked an item, it will never be marked as selected, even if values match. Therefore, it is perfectly fine in a MultiComboBox to have several items with selected set to true, and a value that does not match any option. This simply means that what the user is typing does not yield any results from the list of predefined value. Or you could have several selected items, and a value that matches another item, but unless the user clicks this item, it will not be set to selected, even though the currently entered value matches the item's value.

For ComboBox, this is not the case. The user does not need to explicitly click an item to set the selection to this item. The act of typing is basically selecting - whatever has been typed is considered to be the value of the ComboBox, regardless whether it matches an item or not. This is in contrast to MultiComboBox, where there is an explicit act of selecting an item, and typing by itself means nothing (until an item is clicked).

Summary of Select, ComboBox and MultiComboBox` differences:

for Select there is no value property, the item that is considered selected has the selected property set to true. You can call the selectedOption getter on the select to save yourself some code looping over the options and finding the selected one, but in order to change the selection, you must manually set selected to another option - you cannot do it on the select itself again, to avoid ambiguity.
for ComboBox there is a value property and it is the only source of truth. We will introduce a selectedItem getter on the combo box, which would hold a reference to the last item, explicitly selected by the user (or undefined if the user just typed, but never clicked an item) but still, only the value property would matter. What the new getter would be useful mostly would be to know if the user explicitly clicked an item, if that matters at all.
for MultiComboBox there is a value property that is however not considered a selection by the user, and selected property on the items, which the user has selected. Even if the typed value matches the text of an option, unless the user clicks it, its selected property will not be set to true, unlike ComboBox where whatever you typed is the value, matching or not, and you don't have to click an item to set the selection to its value - the selection already is this value.

Hope that is helpful

Regards,
Vladi

@vladitasev

Hi @vladitasev

thanks a lot for the detailed answer. I discussed your explanation with some colleagues and we understand your point of view now and it makes sense to us, so the getter option would be sufficient for us.

Closing the issue as it seems not relevant any more - Lukas and Vladi discussed and agreed the topic.

so we don't have selectedItem for combo-box? well, I think this is one of the fundamental features, not all workflows are events driven.

Navigation Menu

Repository navigation

ui5-combobox: Add selectedComboBoxItem property/attribute #1447

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

ui5-combobox: Add selectedComboBoxItem property/attribute #1447

Description

Activity

MapTo0 commented on Apr 8, 2020

Lukas742 commented on Apr 8, 2020

chisholmd commented on May 10, 2020

MapTo0 commented on May 12, 2020

MapTo0 commented on Aug 13, 2020

nikolay-kolarov commented on Mar 29, 2022

Lukas742 commented on Mar 31, 2022

vladitasev commented on Apr 1, 2022

Lukas742 commented on Apr 1, 2022

ilhan007 commented on Sep 14, 2022

aammfe commented on May 3, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions