Reselecting a removed item in a multiple selectbox have 'active' class

[iamroi]

I did:

[X] Search for if my issue has already been submitted [X] Make sure I'm reporting something precise that needs to be fixed [X] Give my issue a descriptive and concise title [ ] Create a minimal working example on JsFiddle or Codepen [X] Indicate precise steps to reproduce in numbers and the result, like below

Steps to reproduce:

1. Select an option in a multiple selectbox.
2. Remove the the selected option using 'Delete' key.
3. Reselect the deleted option and notice the item still have 'active' class and pressing the 'Delete' key again won't remove the option which is confusing.

Please let me know if you need more explanation. Thanks!

PS I love this Awesome plugin!!

[quintstoffers]

It looks like this is caused by the render cache. When an item is rendered the rendered HTML is stored in a cache. When an item is selected the render cache is updated with the active class.

When a selected item is removed it is removed from the $activeItems array, but the render cache remains. Meaning that when the item is rendered in the future it'll use the cache, which still has the active class.

One can fix (read: patch) this by defining a plugin that removes the render cache when an item is removed:

function clearRemovedItemCacheSelectizePlugin() {
    const self = this;

    this.removeItem = (function () {
        const original = self.removeItem;

        return function (...args) {
            original.apply(self, args);

            const [value] = args;

            if (self.renderCache && self.renderCache.item) {
                delete self.renderCache.item[value];
            }
        };
    }());
}

Selectize.define('clear_removed_item_cache', clearRemovedItemCacheSelectizePlugin);

Obviously this should be fixed through a PR, but it doesn't look like this repo is very active.

[joallard]

@quintstoffers I'll accept a PR if it is easy to accept. I don't have all the context to understand the exact issue, but if it's an issue in core, it should be fixed.

[quintstoffers]

I have a feeling the problem is caused by the render cache being passed a reference to the generated element. Whenever you modify the element the cached element is modified as well. I haven't actually tested this, so perhaps I'm wrong. If I'm right passing a copy of the rendered element to the cache should fix the problem, but it could possibly break other things.

Removing the active class as outlined in #1216 class is more in line with what happens elsewhere in the code, so perhaps that's the way to go here. Removing the cache all together is a bit drastic.

[danielgehr]

I fixed this by overwriting the active class configured in selectize.less.

.selectize-input {
  .selectize-control.multi & > div {
    &.active {
      background: $my-background-color;
      color: $my-text-color;
      border: none;
    }
  }
}

[risadams]

closing stale issues older than one year. If this issue was closed in error please message the maintainers. All issues must include a proper title, description, and examples.

[caseyjhol]

@risadams This is still an issue (with an available PR to fix it). I recommend reopening.

[caseyjhol]

@risadams I think this was fixed in https://github.com/selectize/selectize.js/pull/1420, so this should be closable now.