Select Component Renderer not showing selected item

[funfried]

Describe the bug

Since Vaadin 24.3.x a Flow Select component with a custom renderer seems not to show its selected value anymore. I recorded a video in version 24.2.12 (see expected-behavior) where everything works fine and another one showing the current version (24.4.3) where it's not been renderered anymore:

https://github.com/vaadin/platform/assets/7093028/f6f575fe-afa8-4b35-adf3-c702a0572f06

Expected-behavior

Here you see the example Vaadin Spring application build with Vaadin 24.2.12 where everything works fine: https://github.com/vaadin/platform/assets/7093028/9c7c6a84-4c4e-4b14-88d7-86f801c82f1b

Reproduction

You can checkout my forked Vaadin example application within a Select component which shows the behavior, just change the Vaadin version to 24.4.3 in the pom.xml and you'll see the issue when you ran the application:

https://github.com/funfried/vaadin-select-with-custom-renderer-issue

System Info

MacBook Pro M1 Max / 32GB MacOS 14.5 (Sonoma)

java -version
openjdk version "21" 2023-09-19
OpenJDK Runtime Environment Zulu21.28+85-CA (build 21+35)
OpenJDK 64-Bit Server VM Zulu21.28+85-CA (build 21+35, mixed mode, sharing)

Vaadin 24.4.3

[ssc-css]

I have the same problem with Icons:

Select<String> iconSelectRenderer2 = new Select<>(); iconSelectRenderer2.setRenderer(new ComponentRenderer<>(path -> { Icon test = new Icon(path.toLowerCase(Locale.ENGLISH).replace('_', '-')); return test; })); iconSelectRenderer2.setItems(VaadinIcon.SELECT.name(), VaadinIcon.ANCHOR.name(), VaadinIcon.ADOBE_FLASH.name()); iconSelectRenderer2.setValue(VaadinIcon.SELECT.name());

[sissbruecker]

Seems to be a regression from https://github.com/vaadin/web-components/pull/7303. That change adds a check for whether a select item has "content" and shows the placeholder if that is not the case. Content is identified as either:

• having a label attribute -> not the case here since it's using a custom renderer
• having any text content -> not the case here, since the custom renderer only shows an image or icon

The check would need to be changed somehow, probably to accept custom rendered items as having content by default, since we can't really make any assumptions whether a custom rendered item represents an empty value or not.

A workaround would be to add some text content to the rendered items, which could just be an invisible span:

    private ComponentRenderer<? extends Component, ExampleDto> createImageRenderer() {
        return new ComponentRenderer<>(dto -> {
            Div wrapper = new Div();

            // Add image...

            // Add some hidden text
            Span hiddenText = new Span();
            hiddenText.setText("hidden");
            hiddenText.getStyle().set("display", "none");
            wrapper.add(hiddenText);

            return wrapper;
        });
    }

[funfried]

@sissbruecker

Indeed, with those changes the images are rendered again! Thanks for the workaround!

Cheers, Fabian