removeOnly or readOnly on change results in duplicated enty

[delkano]

I have a situation where I need to block a multiple select depending on the selections. I've hooked a callback to the 'change' event of the select - or the selectivity div, it seems to make no difference - which checks the case and switches "removeOnly" to true if needed. This is working wonderfully but for one thing: on the "selected" list, the last added item is duplicated. The underlying data is good, it's only a visual bug.

Since I know I am very bad at explaining, I've prepared a minimalistic jsfiddle which reproduces the error: https://jsfiddle.net/ta0v7uz9/

PS: it only happens when the Selectivity is created from a <select>.

[delkano]

I've looked a bit into the code and it seems to happen because, when the options are changed, there is a "change" event fired, which is handled by rerenderSelection. Adding the item also fires a "change" event, but with an "added" object as argument.

The first event resolution renders all the current items (including the just added one); the second event resolution only renders a new item, the last one added.

I am not sure how to solve this. Commenting out the line 1831 (which associates rerenderSelection to the change event) seems to work out for me, but it may have unforeseen consequences.

[arendjr]

Thanks for the report! Unfortunately I don't have time to look into this deeply right now (I did do a quick check, but didn't see what triggers the "change" event when you call setOptions(), that shouldn't happen, I think...), but it sounds like you can work around it by calling setOptions inside a timeout.

[delkano]

How could I not think of a timeout? I updated the jsfiddle with one, and even with a 0ms delay it solves the issue. It's not ideal but as a workaround, at least, it works.