Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #100660
    admin
    Keymaster

    Hey 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/>
     
     
     

    #100661
    Hristofor
    Member

    Hi 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 calling select on the last item might select something completely different.
    Best Regards,
    Christopher
    Smart HTML Elements Team
    https://www.htmlelements.com

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.