Selectize.js: "selected" className is added but never removed

[croban]

After selection of one and then another item "selected" class is not removed.
maybe related to https://github.com/selectize/selectize.js/issues/1154

[joallard]

Can you make a reproduction case for it?

[whelaro]

You know, I'm getting the same behavior, although I don't know where the issues arises (may not be selectize):

http://codepen.io/anon/pen/oYJZqy

I'm not sure if it is due to Material Design for Bootstrap, selectize, or me (probably me), but selected retains for me as well.

the issue I posted to MDoB's tracker

I essentially just worked around it by not having selected have a color and just doing hover event coloring (wasn't personally worried about "current selection" being a different color)

[joallard]

Thanks @whelaro. Here's the STR we were looking for:

1. Open Codepen
2. Click on selectized input, select Value1
3. Click again, select Value2
4. => Value1 still has selected class

I'll accept a fix for this as soon as the next bugfix

[emilsgulbis]

There is how I handle this.
Temp. solution
onDropdownClose: function($dropdown){ $($dropdown).find('.selected').not('.active').removeClass('selected'); }

[whelaro]

@emilsgulbis's temp solution works for me locally and slots in where the commented bit is. I have only tested on single selected options though.

[rautenull]

I fixed this by adding the following code line above the addition of the 'selected' class inside the refreshOptions function (line 1618):

// clear selection on all previously selected elements first
self.$dropdown.find('.selected').removeClass('selected'); 

So the final code looks as follows:

// clear selection on all previously selected elements first
self.$dropdown.find('.selected').removeClass('selected');
// add "selected" class to selected options
if (!self.settings.hideSelected) {
    for (i = 0, n = self.items.length; i < n; i++) {
        self.getOption(self.items[i]).addClass('selected');
    }
}

[nithrm]

Is there a fix tor this using a plugin? Could I create a plugin to fix this issue?

[isochronous]

@nithrm If you're going to do anything, just fork the repo, fix the base problem, and submit a pull request.

[hawaiikaos]

Has this been fixed? I'm still seeing the issue.

[crnjakovic]

@hawaiikaos apply @rautenull's code, it will fix it.
Change

// add "selected" class to selected options
if (!self.settings.hideSelected) {
    for (i = 0, n = self.items.length; i < n; i++) {
        self.getOption(self.items[i]).addClass('selected');
    }
}

to

// add "selected" class to selected options
if (!self.settings.hideSelected) {
    // clear selection on all previously selected elements first
    self.$dropdown.find('.selected').removeClass('selected');

    for (i = 0, n = self.items.length; i < n; i++) {
        self.getOption(self.items[i]).addClass('selected');
    }
}