Delimiter/Paste Questions

[jflad17]

I was curious how the delimiter is supposed to work in terms of when pasting in comma (or delimiter) separated values into a choices input?

My idea was that it allowed to copy paste text by delimiter that will split into many selections, but using the latest release, I can't seem to get that to work on a text input with no choices.

If that is not going to work, I can try to set it on a on change event or additem event, which shouldn't be that bad to do.

[jflad17]

I believe I did get this to work by using the change event. I haven't fully tested this though. Maybe this could be moved to a feature request?

let choicesInput = null;
choicesInput = new Choices("#element", {
    duplicateItemsAllowed: false,
    removeItemButton: true
});
choicesInput.passedElement.element.addEventListener("change"), function (e) {
    let selectedValues = [];
    
    // check if value entered includes comma
    if (e.detail.value.split(",").length > 0) {

        // check for any existing items and append to array
        if (choicesInput.getValue() != undefined) {
            for (const v of choicesInput.getValue()) {
                selectedValues.push(v);
            }
        }
        for (const v of e.detail.value.split(",")) {
            selectedValues.push(v);
        }
        choicesInput.removeActiveItems(); // remove the comma separated string ex "test,test2,test3"
        choicesInput.setValue(selectedValues);  // using above example, result is test test2 test3 as separate bubbles
    }
});

[jflad17]

I believe I did get this to work by using the change event. I haven't fully tested this though. Maybe this could be moved to a feature request?

let choicesInput = null;
choicesInput = new Choices("#element", {
    duplicateItemsAllowed: false,
    removeItemButton: true
});
choicesInput.passedElement.element.addEventListener("change"), function (e) {
    let selectedValues = [];
    
    // check if value entered includes comma
    if (e.detail.value.split(",").length > 0) {

        // check for any existing items and append to array
        if (choicesInput.getValue() != undefined) {
            for (const v of choicesInput.getValue()) {
                selectedValues.push(v);
            }
        }
        for (const v of e.detail.value.split(",")) {
            selectedValues.push(v);
        }
        choicesInput.removeActiveItems(); // remove the comma separated string ex "test,test2,test3"
        choicesInput.setValue(selectedValues);  // using above example, result is test test2 test3 as separate bubbles
    }
});

It looks like this would work initially but not final as existing check doesn't seem to work properly or something else. I will have to look into it more, probably by using the e inside of the function

[Xon]

The delimiter option currently only applies when the backing element is a <textarea>, not for <select> with search

[jflad17]

The delimiter option currently only applies when the backing element is a <textarea>, not for <select> with search

Ok that would make sense. I'll have to try that and see how it handles it.