[MultiSelectComboBox] Selected items on top does not work properly with custom renderers

[sissbruecker]

Description

When configuring the component to show selected items on top and using a custom item renderer, the component does not render the selection in the overlay properly:

• The selected item shows up as blank after items have been loaded
• After filtering items the selected item is not shown on top anymore (this might be intended)
• After removing the filter, the selected item renders the wrong content

This also depends on how the data provider is configured:

• The item showing up as blank only seems to happen with a fetch callback, but not when using a list data provider. When using a fetch callback there seems to be an additional delay before items are loaded, probably because the connector uses the filter debouncer in that case.
• The item rendering the wrong content after removing the filter seems to happen with any data provider

Bildschirmaufnahme.2025-02-27.um.12.28.15.mov

Expected outcome

The selected item should always show the correct content.

Minimal reproducible example

@Route("repro")
public class Repro extends Div {
    List<String> items = IntStream.range(0, 100).mapToObj(i -> "item " + i).toList();

    public Repro() {
        MultiSelectComboBox<String> comboBox = new MultiSelectComboBox<>();
        comboBox.setSelectedItemsOnTop(true);
        comboBox.setRenderer(new ComponentRenderer<>(acc -> new Span(acc)));
        comboBox.setItems(q -> {
            int offset = q.getOffset();
            int limit = q.getLimit();
            String filter = q.getFilter().orElse("");
            return items.stream().filter(a -> filter.isEmpty() || a.contains(filter))
                    .skip(offset)
                    .limit(limit);
        });
        comboBox.setValue("item 5");
        add(comboBox);
    }
}

Steps to reproduce

1. Create a view with the reproduction
2. Open the overlay
3. Enter and remove a filter

Environment

Vaadin version(s): 24.7

Browsers

No response

[web-padawan]

The selected item shows up as blank after items have been loaded

Did some debugging and the __nodeRetryTimeout in the flowComponentDirective for that node is never resolved.
This notably occurs also when using ListDataProvider, in which case the DOM node is actually rendered correctly.

UPD: in the latter case, the oldNode has the correct id but the newNode is null, which causes infinite timeout.