RadioButton don't render correct in production

As title says, I’m having a wierd issue where my RadioButtonGroup won’t render correct when the application is buildt for production.

This is a RadioButtonGroup added directly to a Dialog. I’m on Vaadin 24.4.11.

I’m able to re-create the issue in another view by adding the RadioButtonGroup to a Dialog. Is this a “my app” problem? Any suggestions?

Here is my code:

        RadioButtonGroup<String> radioGroup = new RadioButtonGroup<>();
        radioGroup.addThemeVariants(RadioGroupVariant.LUMO_VERTICAL);
        radioGroup.setLabel("Hvordan er berederen din koblet i dag?");
        radioGroup.setItems("Koblingsboks inni vegg","Koblingsboks på vegg","På stikk","Direkte");
        dialog.add(radioGroup);

Here is whats in the DOM:

<vaadin-radio-group theme="vertical"><vaadin-radio-button><label slot="label"><span>Koblingsboks inni vegg</span></label></vaadin-radio-button><vaadin-radio-button><label slot="label"><span>Koblingsboks på vegg</span></label></vaadin-radio-button><vaadin-radio-button><label slot="label"><span>På stikk</span></label></vaadin-radio-button><vaadin-radio-button><label slot="label"><span>Direkte</span></label></vaadin-radio-button></vaadin-radio-group>

Here is a screenshot of development build:
image

This is rendered in production:
image

Might be a problem how you use / instantiate the dialog or the route in which the dialog is used. There are workarounds available if your setup is too complicated. A reproduceable example would be great to improve the production mode logic tho.

I wish I could provide a reproducable example. I have tried to make a new project with vaadin start and downgraded it to my version and copied the same code, but there it’s all OK when i build it to production. So I guess this is a “MyApp” problem.

The RadioButtonGroup component seem to not behave correctly in my production even when just added flat to a VerticalLayout annotaded as a @Route. This is first time I use the RadioButtons.

I have had no other Vaadin component issues in the past and current workaround is using a ListBox insead.

My application was originaly made with Vaadin Start with version 23 something. I have been gradually upgrading it at some intervall and havent done much else in the pom.xml other than adding some dependancies and changing version numbers etc.

It’s not related to your dependencies. If you can’t reproduce it… I can at least provide you with a workaround:

Add @Uses(RadioButtonGroup.class) to your MainLayout

I added it to my MainLayout like so, but nothing seemed change. Still same issue in production.

@Uses(RadioButtonGroup.class)
public class MainLayout extends AppLayout {

Also there is this other wierd thing that might for some reason be of interest, but I have no idea why.

When I was developing this view I had put the component in a class WelcomeView. There is no link to this view only the @Route is set to “welcome”.

In this particular view the RadioButtonGroup for some reason renders normaly. This is the only view that seem to render it normaly. I have tried to copy the class and just rename it and the @Route to “welcomeagain” but this copied view does not render it correct.

I have no idea why, just thought to mention this wierd behavior.

Any errors in the browser console?

It comes a warning regarding websocket closed, but that comes after a few seconds. Could the @Push have something to do with this?

If someone wants to check the client, working view in production is live here:
https://app.spotbot.no/welcome

and here is the exact copy of the working view that for some reason don’t work:

https://app.spotbot.no/welcomeagain

Can you show the complete code of the two views?
Did you already try to remove existing bundles from src/main/bundles and build the application again?

Production bundle would also be my next guess… normally Uses fixes this problem with routes that aren’t detected… there is also a maven config workaround but I would prefer not to go that “route”…

Do you mind sharing some about your structure?

  • spring boot application?
  • do all you routes have a common package below your main class? Like xyz.a.b.views or do you have your main class in xyz and views on abc that is not below xyz?

Do you instantiate the view/dialog via reflection?
We got the same problem, when the view was created via reflection.
Solution: @Uses(<YourComponent>.class)
Add this to you main view. This tells Vaadin that this component should be added into the production bundle.

Edit: sorry to hear, I just saw you tried it already. Maybe on spring’s application.class?

Thanks all for your interest in my problems. This was solved when I deleted the bundles and rebuild. This is probably written in some documentation, but I was today years old when I heard about this.

Thanks again!