Visual selected state does not get reset when select is cleared

[jochienabuurs]

When using the keyboard to select a value from a select, the visually selected state (managed by adding a .sv-dd-item-active class) does not get reset when the select is cleared.

See the first example: https://svelecte-v5.vercel.app/examples#multiselect

Steps to reproduce:

• Clear the input by clicking on the X inside it.
• Select the input by clicking it.
• Then use the keyboard arrows to navigate to a value (f.e. "Fuchsia")
• Press enter to select it. (the input label changes to "1 selected")
• Clear the input by clicking on the X inside it.
• Select the input by clicking it.
• Notice that "Fuchsia" visually has a selected state, even though it's not actually selected.

Even when using highlightFirstItem={false} and disableHighlight={true} this behavior does not change.

Am I missing something? Do i manually need to remove the class altogether when no value is selected?

[mskocik]

• Notice that "Fuchsia" visually has a selected state, even though it's not actually selected.

Actually it's "active" (active by keyboard/hovered by mouse) state. Colors for "selected" and "active" items are slightly different, but "active" state has higher priority that "selected" see screenshot:

If you repeat your steps, but before clearing fuchsia navigate to another item, you will see it works as it should

[jochienabuurs]

Thank you for the reply. Sorry for not using the correct terms. I meant the active state. I would expect the active state to be reset when all the input values are cleared.

I suppose this behaviour is intended, so I'm curious as to why this is working the way it does. I hope you find the time to explain.

[mskocik]

You need to understand, we are talking about very specific example here (https://svelecte-v5.vercel.app/examples#multiselect) with specific combination of properties (keepSelectionInList + collapseSelection="always") where even some keyboard action doesn't work (Backspace and Ctrl+Backspace).

This is default behavior:

• multi select: dropdown index (for keyboard navigation) is always reset, when drowdown is closed and opened again.
• single select: when item is selected, and dropdown is re-opened, selected item is always active. When no item is selected, dropdown index is reset