Restore select to initial value

hey,

I checked the live preview in the documentation, the button to reset the form (button type="reset") causes select not to keep the default value, select is empty

this feature works fine in version 9.0.1, the bug has appeared since version 9.1.0

how to reproduce the issue:

• visit https://choices-js.github.io/Choices/
• change select to a random value
• click the “reset” button

[masiorama]

As a temporary workaround in my application I managed to intercept reset event on the form and then repopulate all the options by hand:

document.getElementById('formId').select.addEventListener('reset', (ev) => {
    choices.setChoices(async () => {
        return this.options.map(({ value, label }) => ({
            value,
            label,
            selected: false,
        }));
    });
})

This should be unnecessary but at least my app does work. I hope this will be fixed at some point.

[Sogl]

@masiorama I tried your code and saw that the event is not triggered:

const choicesTagsObj = new Choices('#choices-tags', {
            maxItemCount: 4,
            removeItemButton: true,
            allowHTML: false,
            position: 'bottom',
            itemSelectText: 'Push',
            maxItemText: (maxItemCount) => {
                return `Only ${maxItemCount} can be selected`;
            },
        });

document.getElementById('choices-tags').addEventListener('reset', (ev) => {
     console.log('reset');
})

what’s the problem?

After some minutes

Some points:

1. Reset event works only for a form, not for a select element.
2. Choices deletes options structure from a select, so you need to copy it into var before create new Choices element.

Working code:

let choicesTags = document.getElementById("choices-tags");
//copy full select node with values
let choicesTagsBefore = choicesTags.cloneNode(true);
//convert to array
choicesTagsBefore = Array.from(choicesTagsBefore.options); 

const choicesTagsObj = new Choices(choicesTags, {
    maxItemCount: 4,
    removeItemButton: true,
    allowHTML: false,
    position: 'bottom',
    itemSelectText: 'Push',
    maxItemText: (maxItemCount) => {
        return `Only ${maxItemCount} can be selected`;
    },
});

//fill again after form reset (Choices.js bug workaround)
document.getElementById('therapy-form').addEventListener('reset', (ev) => {
    // console.log('reset');
    choicesTagsObj.setChoices(async () => {
        return choicesTagsBefore.map(({ value, label }) => ({
            value,
            label,
            selected: false,
        }));
    });
})