ComboBox uses data-hs-combo-box-search-text value for selected input value instead of the option value

[antero111]

Summary

data-hs-combo-box-search-text value is show in the HTML ComboBox input value when data is selected instead of the option value

Detailed Description

When selecting or highlighting a value with arrow keys from an HTML ComboBox, the data-hs-combo-box-search-text value is used to set the input value while the data for the selected option is received correctly from data-hs-combo-box-item-stored-data.

The issue is that the option label and the search-text can differ for example when one might want to add more search keywords for the search text to improve search results (or in my case add manual index number to not have the options be sorted alphabetically.)

Here is an example of the scenario where I ran into this problem: The selection uses an array of options that it assigns an index number to the start of the option and then the option element itself shows the value. When selected or highlighted, the input value is assigned the search-text value when I wanted the option value.

Another example can be seen in this basic example https://preline.co/docs/combobox.html#html-example for example when changing the Argentina label.

And with search the issue can be seen here for example when I have a set keyword that I can find specifically and then select the option... the keyword is shown even thought it should not.

---

Originally my issue comes from the automatic sorting of the options to which I found a solution with the search-text index trick.

Automatic sorting can be problematic for example when having data that should be kept in certain order. I have data that is sorted by dates from back end and in front-end selection the data is sorted incorrectly due to the automatic sorting.

Is the automatic sorting needed or could it be a toggleable feature?

---

Oh, and also could the ComboBox documentation data options section be more explicit on each option to define whether its used with JSON data or with the HTML syntax. I have found myself looking at the source code fairly frequently while building my select components to know which is used with HTML that I use.

---

Preline v2.7 and Vue 3

Thank you for reading. Hope this issue is something to consider about.

Use Cases

User wants to define keywords to the data-hs-combo-box-search-text text without them showing in the options.

For example, I have a race track listing where each track (option) is grouped under a country and I would like to have an option for user to search the country and then the search-text matches all the country options and shows them. This is possible by adding the country to the option search-text but the option shown incorrectly.

In this example the search-text is like data-hs-combo-box-search-text="index country option" where the index and country can be seen when the option is selected. The correct behaviour should only show the "Ferritslev" in the input bar.