selectedState does not exist

[St-Permiakov]

Related to #367
As stated there, selectedState css-class does not appear on selected option.
So either documentation is incorrect or it's a bug.

[mroseboom]

Hey there, any update on this?

[tinovyatkin]

@jshjohnson Do you want that to be implemented or removed from documentation?

[jshjohnson]

I think it can be removed - I don't see any distinction between this and the highlighted state

[St-Permiakov]

It most assuredly cannot.
Highlighted state appears on hover and selected should appear on currently selected (checked) items. Those are completely different use cases.

[jshjohnson]

@St-Permiakov you could use the 'highlighted' state for that situation

[mroseboom]

@jshjohnson At this moment it isn't implemented or i'm missing someting?

[tinovyatkin]

@mroseboom it's not implemented in code base in current version.

[St-Permiakov]

Does it appear on selected item without user hovering it?
How can I distinguish selected item when I'm hovering it?
And what if I'm supposed to make selected item visually disabled (that was my use case actually)?

[tinovyatkin]

@jshjohnson the implementation will be trivial and I can easily add that, however, @St-Permiakov use case probably will anyway require overriding template rendering.

Is that feature were never implemented or were removed in past version without updating documentation?

[St-Permiakov]

Well, the only reason why I created this issue was impossibility to distinguish hovered and selected states for styling. That's what that selectedState was supposedly for. If there is any other way...

[tinovyatkin]

@St-Permiakov with Choices 8 released today:

const example = new Choices(element, {
  callbackOnCreateTemplates: () => ({
    item(classes, item) {
      const i = Choices.defaults.templates.item.call(this, classes, item);
      if (item.selected) i.classList.add("is-selected");
      return i;
    },
   // or
    choice(classes, choice) {
      const i = Choices.defaults.templates.choice.call(this, classes, choice);
      if (choice.selected) i.classList.add("is-selected");
      return i;
    }
  })
});

[stasguma]

@tinovyatkin For me works the second example with a choice function. Thanks a lot.
I'll correct you a little.
In this part classList.add(".is-selected") we don't need a dot before is-selected.

It would be better if it worked without a workaround

[tinovyatkin]

@stasguma glad it works for you, fixed an example, thank you!

[jshjohnson]

I've addressed this bug here: #754 - note only a "choice" has a "selected" state. An item does not 👍