Hi there,
I am new to vaadin. I am facing an issue while using ComboBox component. When I click on combobox the combo box popup appears and then I scroll down or up the popup is getting detached from its parent component and floating along with the mouse scroll. This problem occurs only when Combobox is created on top of window component. It works fine on views. I am using v7 combobox component. I read in previous similar vaadin threads, that this is a known bug in vaadin7 and was addressed in later releases. But according to my application requirement I can’t upgrade the component to vaadin8. Can anyone please help me out of this ?
Here’s my pom.xml,
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.aman.vaadin</groupId>
<artifactId>ComboBoxDemo</artifactId>
<packaging>war</packaging>
<version>1.0</version>
<name>ComboBoxDemo</name>
<prerequisites>
<maven>3</maven>
</prerequisites>
<properties>
<vaadin.version>8.4.5</vaadin.version>
<vaadin.plugin.version>8.4.5</vaadin.plugin.version>
<jetty.plugin.version>9.3.9.v20160517</jetty.plugin.version>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
<!-- If there are no local customizations, this can also be "fetch" or
"cdn" -->
<vaadin.widgetset.mode>local</vaadin.widgetset.mode>
</properties>
<repositories>
<repository>
<id>vaadin-addons</id>
<url>http://maven.vaadin.com/vaadin-addons</url>
</repository>
</repositories>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-bom</artifactId>
<version>${vaadin.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
<dependencies>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-server</artifactId>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-push</artifactId>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-client-compiled</artifactId>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-themes</artifactId>
</dependency>
<!-- https://mvnrepository.com/artifact/com.vaadin/vaadin-compatibility-client -->
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-compatibility-client</artifactId>
<version>8.4.5</version>
<scope>provided</scope>
</dependency>
<!-- https://mvnrepository.com/artifact/com.vaadin/vaadin-compatibility-server -->
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-compatibility-server</artifactId>
<version>8.4.5</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>3.2.0</version>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
<!-- Exclude an unnecessary file generated by the GWT compiler. -->
<packagingExcludes>WEB-INF/classes/VAADIN/widgetsets/WEB-INF/**</packagingExcludes>
</configuration>
</plugin>
<plugin>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<version>${vaadin.plugin.version}</version>
<executions>
<execution>
<goals>
<goal>update-theme</goal>
<goal>update-widgetset</goal>
<goal>compile</goal>
<!-- Comment out compile-theme goal to use on-the-fly theme compilation -->
<goal>compile-theme</goal>
</goals>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-clean-plugin</artifactId>
<version>3.0.0</version>
<!-- Clean up also any pre-compiled themes -->
<configuration>
<filesets>
<fileset>
<directory>src/main/webapp/VAADIN/themes</directory>
<includes>
<include>**/styles.css</include>
<include>**/styles.scss.cache</include>
</includes>
</fileset>
</filesets>
</configuration>
</plugin>
<!-- The Jetty plugin allows us to easily test the development build by
running jetty:run on the command line. -->
<plugin>
<groupId>org.eclipse.jetty</groupId>
<artifactId>jetty-maven-plugin</artifactId>
<version>${jetty.plugin.version}</version>
<configuration>
<scanIntervalSeconds>2</scanIntervalSeconds>
</configuration>
</plugin>
</plugins>
</build>
<profiles>
<profile>
<!-- Vaadin pre-release repositories -->
<id>vaadin-prerelease</id>
<activation>
<activeByDefault>false</activeByDefault>
</activation>
<repositories>
<repository>
<id>vaadin-prereleases</id>
<url>http://maven.vaadin.com/vaadin-prereleases</url>
</repository>
<repository>
<id>vaadin-snapshots</id>
<url>https://oss.sonatype.org/content/repositories/vaadin-snapshots/</url>
<releases>
<enabled>false</enabled>
</releases>
<snapshots>
<enabled>true</enabled>
</snapshots>
</repository>
</repositories>
<pluginRepositories>
<pluginRepository>
<id>vaadin-prereleases</id>
<url>http://maven.vaadin.com/vaadin-prereleases</url>
</pluginRepository>
<pluginRepository>
<id>vaadin-snapshots</id>
<url>https://oss.sonatype.org/content/repositories/vaadin-snapshots/</url>
<releases>
<enabled>false</enabled>
</releases>
<snapshots>
<enabled>true</enabled>
</snapshots>
</pluginRepository>
</pluginRepositories>
</profile>
</profiles>
</project>
Here’s MyUI.java
package com.aman.vaadin;
import javax.servlet.annotation.WebServlet;
import com.aman.vaadin.window.PopupWindowDemo;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.navigator.Navigator;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.v7.ui.ComboBox;
import com.vaadin.v7.ui.VerticalLayout;
@Theme("mytheme")
public class MyUI extends UI {
private static final long serialVersionUID = 1L;
@Override
protected void init(VaadinRequest vaadinRequest) {
final VerticalLayout layout = new VerticalLayout();
Button button = new Button("Click Me");
button.addClickListener(e -> {
PopupWindowDemo popupWindowDemo = new PopupWindowDemo();
UI.getCurrent().addWindow(popupWindowDemo);
});
layout.addComponent(button);
ComboBox comboBox = new ComboBox("Items");
comboBox.addItem("Hello");
comboBox.addItem("World");
comboBox.setWidth("500px");
layout.addComponent(comboBox);
setContent(layout);
}
@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {
private static final long serialVersionUID = 1L;
}
}
Here’s PopupWindow.java
package com.aman.vaadin.window;
import com.vaadin.ui.Button;
import com.vaadin.ui.Window;
import com.vaadin.v7.ui.ComboBox;
import com.vaadin.v7.ui.VerticalLayout;
public class PopupWindowDemo extends Window {
private static final long serialVersionUID = 1L;
public PopupWindowDemo() {
setClosable(false);
setWidth("1366px");
setHeight("768px");
VerticalLayout layout = new VerticalLayout();
setContent(layout);
ComboBox comboBox = new ComboBox("Items1");
comboBox.addItem("Hello");
comboBox.addItem("World");
comboBox.setWidth("500px");
layout.addComponent(comboBox);
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
layout.addComponent(new Button("Close me", event -> close()));
}
}