JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › ComboBox › Combo Box Bug?
Tagged: custom element, smart elements, smart framework, smart-combo-box, web component, web components
- This topic has 1 reply, 2 voices, and was last updated 4 years, 6 months ago by
Hristofor.
-
AuthorPosts
-
February 25, 2020 at 12:28 am #100660
admin
KeymasterHey guys,
so I am trying to use the combo box to do something a little different… I am using it as a tool where users can define options for a later generated drop down list. The goal is for the user to type a string and hit enter to add the string as an item. I tried to achieve this by attaching a onkeydown function to the combo box that, when the user hits enter, takes the search string, inserts an item then selects the item.
This seems to not work so well. after entering three items, the labels of the selected tokens change.
for example, if I enter one, the user sees [one x].
if i then enter two, the user sees [one x, two x].
if i then enter three, the user sees [two x, two x, two x, three x].
It is very strange behavior that I suspect has to do with hidden functions being called on enter.
Is there a solution for this? or a better way to go about it?
I have somewhat solved the issue by clearing and reselecting the items I want, but it is a somewhat hacky approach.
Below is the my initial code:<smart-combo-box selection-mode="zeroOrMany" class="COMBOBOXNODROPDOWN REQUIREDCOMBOBOX" drop-down-open-mode="none" onkeydown="DigitalForms_AddPicklistItem(event, this);"selection-display-mode="tokens" placeholder="Select items:"></smart-combo-box> combolist.addEventListener('opening', function (event) { event.preventDefault(); }); DigitalForms_AddPicklistItem = function (event, param) { var keycode = (event.keyCode ? event.keyCode : event.which); if (keycode == '13') { var value = jQuery(param).find('input[smart-id="input"]').val(); var comboList = jQuery(param)[0]; if (comboList.selectedValues.indexOf(value) < 0 && value != "") { comboList.insert(comboList.items.length, {value: value, label:value}); comboList.select(comboList.items[comboList.items.length - 1]); } else { jQuery(param).find('input[smart-id="input"]').val(""); } } }
<pre style=’border:none !important; padding: 0px !important; overflow: auto; margin-top: 5px; margin-bottom: 5px;’ class=’code’><div/>
February 25, 2020 at 10:53 am #100661Hristofor
MemberHi ctstrist,
thank you for the feedback. There’s an issue with the ComboBox that we will fix in the next release of the elements. Regarding your approach, clearing the items after every operation is recommended. If you don’t clear the items they will be present in the ComboBox’s dataSource and if you enter the same value, the element will not create a new item for it, because it’s already present and callingselect
on the last item might select something completely different.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com -
AuthorPosts
- You must be logged in to reply to this topic.