Broken UI due to strangest bug I ever see

Hi,

I was testing the latest release of Vaadin Flow (14.0.0.r6) with Goran Atanasovski’s multiselect-combo-box (2.0.0.rc1). Something strange was breaking the UI. Some styles and scripts were missing and the UI look broken.

After several tries, I thing I’ve isolated the problem at its minimum expression:

This is the project base UI for Vaadin Flow:

![Image OK]
(https://i.ibb.co/sKFBtLb/Captura-de-pantalla-de-2019-07-21-14-54-22.png)

This is the code for the MainView:

/**
 * The main view contains a button and a click listener.
 */
@Route("")
@PWA(name = "Project Base for Vaadin Flow", shortName = "Project Base")
public class MainView extends VerticalLayout {

    public MainView() {
        Button button = new Button("Click me",
                event -> Notification.show("Clicked!"));
        add(button);
    }
}

This is the broken UI. Note the missing styles of the button (it is more obvious with Lumo Dark Theme):

![Image KO]
(https://i.ibb.co/XWHwYWY/Captura-de-pantalla-de-2019-07-21-14-50-28.png)

The UI looks broken, but works fine because Button is a very simple component. However other components show errors like (TypeError) : Cannot read property ‘xxx’ of undefined.

This is the code for the broken MainView:

/**
 * The main view contains a button and a click listener.
 */
@Route("")
@PWA(name = "Project Base for Vaadin Flow", shortName = "Project Base")
public class MainView extends VerticalLayout {
	private MultiselectComboBox<Object> someComponent;
	private ComboBox otherComponent;

	public MainView() {
		Button button = new Button("Click me", event -> Notification.show("Clicked!"));
		add(button);
	}
}

If you comment any of the declared components (someComponent or otherComponent) or use any other type than ComboBox, it works fine.

I don’t know if this is a Vaadin bug or a MultiselectComboBox bug.

My setup:

Apache Maven 3.6.0

Java version: 11.0.3, vendor: Ubuntu, runtime: /usr/lib/jvm/java-11-openjdk-amd64

Default locale: es_AR, platform encoding: UTF-8

OS name: “linux”, version: “5.0.0-20-generic”, arch: “amd64”, family: “unix”

Node: v10.15.2

NPM: 6.10.2-next.1

I’ve attached the code.
17781974.tgz (625 KB)

Hi German,

Have you tried clearing your cache? I’ve experienced that switching between different versions of Vaadin can result in wierd front-end behaviors, that often can be solved by clearing the cache.

Hi!

Please look at the Vaadin directory (Gorans multiselect). I have got the same problem an posted it to Goran.

Goran answeres to problems and always helps. I guess we will find this problem too.

Cheers,
Thomas

Martin Israelsen:
Hi German,

Have you tried clearing your cache? I’ve experienced that switching between different versions of Vaadin can result in wierd front-end behaviors, that often can be solved by clearing the cache.

Yes. I’ve isolated the problem in a blank project. I tested it separately after cleaning all.

Thomas Niedergesaess:
Hi!

Please look at the Vaadin directory (Gorans multiselect). I have got the same problem an posted it to Goran.

Goran answeres to problems and always helps. I guess we will find this problem too.

Cheers,
Thomas

I did it, but I think it is a Vaadin bug.

Thank you for your reply!

Hi Germán,

Thank you for raising this issue. I believe it was caused due to conflicting dependencies. I have published a new RC version that resolves these issues. Please update your pom.xml to use the latest version:

<dependency>
   <groupId>org.vaadin.gatanaso</groupId>
   <artifactId>multiselect-combo-box-flow</artifactId>
   <version>2.0.0.rc2</version>
</dependency>

Hopefully this helps!

BR,

Goran

Thank you! Works like a charm.