Framework: MenuBar bugs on Android platform

Created on 7 Nov 2014  路  10Comments  路  Source: vaadin/framework

Originally by _ngsage_


Android version 4.2.2

With Android default browser, the popup containing the MenuItems of a MenuBar can't be dismissed. Maybe this bug is related to https://github.com/vaadin/framework/issues/5870?

With Chrome and Firefox, when the MenuBar is setAutoOpen(true), clicking on a "root" MenuItem will show the popup for a very short time. Clicking on it a second time will work correctly (as long as the MenuBar doesn't loses focus).

See attached file.


Imported from https://dev.vaadin.com/ issue #15188

bug workaround

All 10 comments

Originally by _ngsage_


Attachment added: SandboxUI.java (1.6 KiB)

Originally by _proaccountapp_


Updated prioritization date.

Originally by _Markus Koivisto_


We could not reproduce the first half of the issue (not being able to dismiss MenuItems).

Auto-open works by opening the submenu when the user hovers the mouse pointer over the menubar item. This does not translate very well to touch-based UIs. What hovering means for a touch-based UI is not very well defined, after all.

For a better touch experience, we would recommend not using autoOpen with touch-based UIs.

Originally by _Markus Koivisto_


After a brief discussion we agree that it's a bit of misfeature. The menuitem on touch events should stay open until there's another click event elsewhere (touch or not). In other words, on touch devices, the behaviour should mirror that of a MenuBar with setAutoOpen(false).

We will remedy this as soon as we can.

Originally by _proaccountapp_


Removed prioritization date.

Hello there!

It looks like this issue hasn't progressed lately. There are so many issues that we just can't deal them all within a reasonable timeframe.

There are a couple of things you could help to get things rolling on this issue (this is an automated message, so expect that some of these are already in use):

  • Check if the issue is still valid for the latest version. There are dozens of duplicates in our issue tracker, so it is possible that the issue is already tackled. If it appears to be fixed, close the issue, otherwise report to the issue that it is still valid.
  • Provide more details how to reproduce the issue.
  • Explain why it is important to get this issue fixed and politely draw others attention to it e.g. via the forum or social media.
  • Add a reduced test case about the issue, so it is easier for somebody to start working on a solution.
  • Try fixing the issue yourself and create a pull request that contains the test case and/or a fix for it. Handling the pull requests is the top priority for the core team.
  • If the issue is clearly a bug, use the Warranty in your Vaadin subscription to raise its priority.

Thanks again for your contributions! Even though we haven't been able to get this issue fixed, we hope you to report your findings and enhancement ideas in the future too!

The issue was automatically closed due to inactivity. If you found some new details to it or started working on it, comment on the issue so that maintainers can re-open it.

The issue is easily reproducible with Vaadin 8.12.0. To reproduce, unzip the attached example app and run it via ./gradlew build appRun. Then navigate to the app from your Android phone; I used Android 10 and newest Chrome.

karibu-helloworld-application.zip

The workaround is to call setAutoOpen(false) on touch devices - then the menu behaves nicely. To detect the mobile device, just query UI.getCurrent().getPage().getWebBrowser().isTouchDevice(); and update autoOpen accordingly.

I would expect that the MenuBar would ignore the autoOpen setting on touch devices, since the hover feature is not present on touch devices, and therefore the autoOpen setting doesn't make any sense and only breaks the component on touch devices.

I would expect that the MenuBar would ignore the autoOpen setting on touch devices, since the hover feature is not present on touch devices, and therefore the autoOpen setting doesn't make any sense and only breaks the component on touch devices.

That sounds like an acceptable solution to the problem.

Excellent remark from Tatu: If you have hybrid laptop with both mouse and touch screen reporting itself as touch device

Therefore, a better check would be BrowserInfo.get().isAndroid() || BrowserInfo.get().isIOS().

Was this page helpful?
0 / 5 - 0 ratings