Vaadin ComboBox menu opens wrong place on Google Chrome www browser

Hi,

I have noticed problem with Vaadin ComboBox component. Problem occurs when using Google Chrome www browser. Google Chrome Linux and Windows version 61.0.3163.91 (Official Build) (64-bit) have this problem. The menu of the Combobox opens way above the ComboBox. Problem may arise, when www page is scrolled down. There is not problem with Firefox or Internet Explorer.

I added an example screen capture as an attachement. Contact language ComboBox opens menu way above, where it should be. Example www page has VerticalLayout as base layout. There are three CssLayouts with caption texts “Personal Information”, “Contact Information” and “Profession & Research”. Each of those three CssLayout has two CssLayouts inside of them. TextFields and ComboBoxes on the left side are inside of one CssLayout and TextFields and ComboBoxes on the right side are inside of another CssLayout.

I think this is a bug of Vaadin framework and it seem to be generic problem on another www pages too. I used originally Vaadin version 7.5.7 and upgrade to version 7.7.10 did not solve the problem. Does anyone has an idea how to fix this problem?
35711.jpg

I have notice the same problem. this is a huge problem!

Do you have a small sample project where this behavior is reproducible?

-Olli

Hello,

We are facing to the same problem since the last Chrome update (v61). It seems to me that the problem occurs only with Vaadin portlet inside Liferay when the screen is scrolled. In our backoffice Vaadin application (outside of our Liferay portal), we don’t remark this behavior. As said, this is a huge problem for us too…

Best regards.

Nicolas

Hello, for us problem is vaadin portlet inside IBM WebSphere Prortal

Hi,

I can confirm that problem occurs on Vaadin portlet used on Liferay.

at this link i make a sample portlet with vaadin 7.7.10 with bug
https://github.com/izzio84/demo-app-version7
at this link i make a sample portlet with vaadin 8.1.5 without bug
https://github.com/izzio84/demo-app

vaadin 8 don’t have problem with combobox(for us migrate to is not so simple …).

This Chrome change might be relevant: https://bugs.chromium.org/p/chromium/issues/detail?id=157855

Hello, any idea how to fix it?

Best guess: it needs to be fixed in Overlay.java’s method setPopupPosition, but it’s also possible that the numbers coming in (from e.g. SuggestionPopup’s showSuggestions in VFilterSelect.java) are not correct. The tricky parts are duplicating the issue correctly and not breaking any other browsers while doing this fix.

-Olli

Ah, that would indicate that a GWT fix is needed (this one: https://gwt-review.googlesource.com/#/c/gwt/+/19140/).

-Olli

Hello, this post shows how to fix the problem in version 6.8.

https://vaadin.com/forum/#!/thread/16822043

I didn’t try to do the same with vaadin 7, but I think it could work.

From what I understand, this issue is caused by or related to this GWT issue: https://github.com/gwtproject/gwt/issues/9542

It seems that a patch or new version for GWT is needed, so I was wondering if it´s possible to update the GWT version inside an already created app, or if it involves using a new Vaadin version?

Thank you.

There’s a guide on how to do that here:
https://vaadin.com/blog/how-to-use-gwt-2-8-in-vaadin-applications-today?utm_content=34610871

Thanks a lot Olli, I searched the forum but didn’t think of searching the blog.

I will try gwt 2.8 in my application as soon as possible.

Note that you might need a custom build of GWT. The changes in
https://gwt-review.googlesource.com/#/c/gwt/+/19140/
were done in August this year, while
2.8.1, the latest release, came out in April
.

-Olli

Hi,

I noticed that GWT 2.8.2 version is published and it seems to contain error fix for this Google Chrome problem. Is it possible to make new Vaadin 7 version release with GWT 2.8.2 to fix this Google Chrome problem?

Hi all.

Try to do the following steps to build an vaadin version with gwt 2.8.2.

  1. Download gwt 2.8.2 from http://www.gwtproject.org/versions.html
  2. Choose the vaadin version you want to build and then clone its SVN repository from https://dev.vaadin.com/svn/versions
  3. Rename the lib/core/gwt project directory to whatever you want. Ex. gwt-2.3.0
  4. Unpack the gwt-2.8.2.zip file to lib/core and rename the folder gwt-2.8.2 to gwt.
  5. Rename the file gwt-dev.jar to gwt-dev-noservlet.jar and remove the javax/servlet folder inside it.
  6. Rename the file gwt-user.jar to gwt-user-noservlet.jar and remove the javax/servlet folder inside it.
  7. Comment the tag inside the task webcontent of build/build.xml file.
  8. Run the package-all task of build/build.xml file with the -Dignoreversion=1 parameter and using a JRE 1.7.

At the end, you will have the vaadin jar file create at build/result/vaadin-x.y.z.dev-yyyyMMdd/WebContent/WEB-INF/lib

I did a simlar fix in 6.8, it should be easier with Vaadin 7 as the GWT versions are closer.

Just for information for those who are interested, we are currently in process of testing and verifying the fix for Vaadin 7.