Problems displaying ListBox

Flow
1

Hi,
I have problems displaying a ListBox inside my application. If I try to display it inside the Vaadin skeleton starter it works just fine…

final var listBox = new ListBox<String>();
      ArrayList<String> items = new ArrayList<>();
      items.add("Elem1");
      items.add("Elem2");
      items.add("Elem3");
      listBox.setItems(items);

I have noticed that the CSS looks different in my application when comparing with the vaadin skeleton application.
Here is the CSS when correctly displayed:

Screenshot_20241206_102127
Screenshot_20241206_1021272045×822 108 KB

Here is the wrong CSS:
Screenshot_20241206_101642
Screenshot_20241206_101725
Screenshot_20241206_101725828×226 24.3 KB

As you can see in the second CSS the “role=listbox” is missing , also for each item “role=option” is missing.
Do you have any idea what can cause the CSS of ListBox to be changed so that it is not displayed correctly?

2

Is your problem only when running production mode? It looks like not the css is missing but the whole client side.

3

DefaultDeploymentConfiguration|INFO |Vaadin is running in production mode.

Somehow I cannot set it to development mode even if I have set ‘productionMode’: false

4

Sounds like you have a local production bundle. Try Vaadin Dance and it should work again

5

What Vaadin version are you using?
productionMode parameter has been deprecated for a long time; the flag is automatically set by build-frontend.
However, recent Vaadin version perform a cleanup after production build, so that a subsequence run of the application from the IDE would result in a DEV mode execution.
If on older version, running mvn clean should allow you to run the application in DEV mode again.

6

I am using Vaadin 24.4.11
but forceProductionBuild is set

<configuration>
                    <!-- To always force an optimized production bundle build set this configuration to 'true' -->
                    <!-- To possibly use the pre-compiled production bundle remove or set to 'false' -->
                    <forceProductionBuild>false</forceProductionBuild>
                    <!-- To have reproducible build by running 'npm ci' -->
                    <ciBuild>true</ciBuild>
                </configuration>
7

The mentioned change is in Vaadin 24.5, but not back-ported to 24.4.
But manual cleanup should work.

8

Do you know how to activate it?

9

Its part of the Vaadin maven plugin.

mvn vaadin:dance
10

Thanks vaadin:dance helped !

11

Do you know by chance where it the “dance” option documented? I cannot find it here https://vaadin.com/docs/latest/flow/configuration/maven.
Found it https://vaadin.com/docs/latest/flow/production/production-build#dance :-)

12

Strange thing: I have Java and Groovy classes mixed up in my project. Somehow, for the views created in Groovy, the problem remains also after mvn vaadin:dance. Any ideas?

13

The problem occurs for any Groovy view

14

Are groovy sources compiled into Java classes during the build?
If so, make sure that the compilation is done before build-frontend is executed

1 Like