TwinColSelect 4.0.0 Status

Directory TwinColSelect
1

“For Vaadin 25, it is recommended to use TwinColSelect version 4.0.0. Version 4.0.0 is currently in ‘Beta’ status. When can a final version be expected?”

2

I’m wondering about this too. Hopefully the final version of TwinColSelect 4.0.0 will be released soon.

3

I think I marked beta because it has not support for Aura theme. The component is however stable and if you check the repo, you will see there is a very good test kit ensuring the quality of the component.

4

Many thanks for your answer.
In version 4.0.0 (compatible with Vaadin 25), selected items in TwinColSelect fail to highlight visually.

Inspection of the rendered DOM shows that items utilize the standard ARIA attribute aria-selected="true" / aria-selected="false" when selected/deselected:

However, in twincolselect.css, the rule for selected item background targets the non-existent [checked] attribute:

twin-col-select div.twincolselect-item[checked] {
background: var(–lumo-primary-color);
color: var(–lumo-tint-80pct);
}

Because [checked] is never placed on the DOM element, the CSS rule never triggers.

5

I’ve implemented a temporary workaround in my application stylesheet:

twin-col-select div.twincolselect-item[aria-selected="true"] {
    background: var(--lumo-primary-color) !important;
    color: var(--lumo-tint-80pct) !important;
}

twin-col-select div.twincolselect-item:hover {
    background-color: var(--table-hover-bg-color) !important;
    cursor: pointer;
}

twin-col-select div.twincolselect-item[aria-selected="true"]:hover {
    background-color: var(--lumo-primary-color-50pct) !important;
}

I hope this attribute mismatch in twincolselect.css can be fixed directly in an upcoming release of the add-on.

6

I just uploaded version 4.1.0 in Directory marked stable and I added Aura theme support in it.