Improve VMenuBar click handling logic (#11356)

* Improve VMenuBar click handling logic

During `updateFromUIDL` inside MenuBarConnector we empty and re-instantiate the components of MenuBar. When we are modifying the Menubar from the BlurEventListener of another component, we ,by this, remove widgets, therefore clickEvent is not fired and the action of the MenuItem is not proceed as a result. (The BlurEvent is fired before the click event in the chain of events. )

To improve the situation, we catch onMouseDown event , which is fired before BlurEvent,by assigning mouseDown flag to true. Then if no click event has yet happened, we delay the execution of update inside `updateFromUIDL` by default 500 ms. Then if click event occurs, it proceeds normally. The time can be increased/decreased using setter.

There is no delay, if we are clicking on the MenuBar as usual or no Blur listener is set.

This change allows setting descriptions

* Remove accidentally committed comment

* Don't update the state on the getDelayMs call

2 files changed, 117 insertions, 93 deletions

diff --git a/client/src/main/java/com/vaadin/client/ui/VMenuBar.java b/client/src/main/java/com/vaadin/client/ui/VMenuBar.java
index 2d4f35a2ad..2f905bd4b9 100644
--- a/client/src/main/java/com/vaadin/client/ui/VMenuBar.java
+++ b/client/src/main/java/com/vaadin/client/ui/VMenuBar.java
@@ -121,6 +121,8 @@ public class VMenuBar extends FocusableFlowPanel implements
     /** For internal use only. May be removed or replaced in the future. */
     public boolean htmlContentAllowed;
 
+    public boolean mouseDownPressed;
+
     private Map<String, List<Command>> triggers = new HashMap<>();
 
     public VMenuBar() {
@@ -377,7 +379,6 @@ public class VMenuBar extends FocusableFlowPanel implements
     @Override
     public void onBrowserEvent(Event e) {
         super.onBrowserEvent(e);
-
         // Handle onload events (icon loaded, size changes)
         if (DOM.eventGetType(e) == Event.ONLOAD) {
             VMenuBar parent = getParentMenu();
@@ -401,20 +402,26 @@ public class VMenuBar extends FocusableFlowPanel implements
                 targetItem = item;
             }
         }
-
         if (targetItem != null) {
             switch (DOM.eventGetType(e)) {
 
+            case Event.ONMOUSEDOWN:
+                if (e.getButton() == Event.BUTTON_LEFT) {
+                    if (isEnabled() && targetItem.isEnabled()) {
+                        // Button is clicked, but not yet released
+                        mouseDownPressed = true;
+                    }
+                }
+                break;
             case Event.ONCLICK:
                 if (isEnabled() && targetItem.isEnabled()) {
+                    mouseDownPressed = false;
                     itemClick(targetItem);
                 }
-
                 break;
 
             case Event.ONMOUSEOVER:
                 LazyCloser.cancelClosing();
-
                 if (isEnabled() && targetItem.isEnabled()) {
                     itemOver(targetItem);
                 }
diff --git a/client/src/main/java/com/vaadin/client/ui/menubar/MenuBarConnector.java b/client/src/main/java/com/vaadin/client/ui/menubar/MenuBarConnector.java
index 8697f07d49..a66cd59851 100644
--- a/client/src/main/java/com/vaadin/client/ui/menubar/MenuBarConnector.java
+++ b/client/src/main/java/com/vaadin/client/ui/menubar/MenuBarConnector.java
@@ -21,6 +21,7 @@ import java.util.Stack;
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.user.client.Command;
+import com.google.gwt.user.client.Timer;
 import com.vaadin.client.ApplicationConnection;
 import com.vaadin.client.Paintable;
 import com.vaadin.client.TooltipInfo;
@@ -64,110 +65,126 @@ public class MenuBarConnector extends AbstractComponentConnector
         // For future connections
         widget.client = client;
         widget.uidlId = uidl.getId();
+        Timer timer = new Timer() {
 
-        // Empty the menu every time it receives new information
-        if (!widget.getItems().isEmpty()) {
-            widget.clearItems();
-        }
-
-        UIDL options = uidl.getChildUIDL(0);
-
-        if (null != getState()
-                && !ComponentStateUtil.isUndefinedWidth(getState())) {
-            UIDL moreItemUIDL = options.getChildUIDL(0);
-            StringBuilder itemHTML = new StringBuilder();
-
-            if (moreItemUIDL.hasAttribute("icon")) {
-                Icon icon = client
-                        .getIcon(moreItemUIDL.getStringAttribute("icon"));
-                if (icon != null) {
-                    itemHTML.append(icon.getElement().getString());
+            @Override
+            public void run() {
+                // Empty the menu every time it receives new information
+                if (!widget.getItems().isEmpty()) {
+                    widget.clearItems();
                 }
-            }
 
-            String moreItemText = moreItemUIDL.getStringAttribute("text");
-            if ("".equals(moreItemText)) {
-                moreItemText = "&#x25BA;";
-            }
-            itemHTML.append(moreItemText);
+                UIDL options = uidl.getChildUIDL(0);
 
-            widget.moreItem = GWT.create(VMenuBar.CustomMenuItem.class);
-            widget.moreItem.setHTML(itemHTML.toString());
-            widget.moreItem.setCommand(VMenuBar.emptyCommand);
+                if (null != getState()
+                        && !ComponentStateUtil.isUndefinedWidth(getState())) {
+                    UIDL moreItemUIDL = options.getChildUIDL(0);
+                    StringBuilder itemHTML = new StringBuilder();
 
-            widget.collapsedRootItems = new VMenuBar(true, widget);
-            widget.moreItem.setSubMenu(widget.collapsedRootItems);
-            widget.moreItem.addStyleName(
-                    widget.getStylePrimaryName() + "-more-menuitem");
-        }
-
-        UIDL uidlItems = uidl.getChildUIDL(1);
-        Iterator<Object> itr = uidlItems.iterator();
-        Stack<Iterator<Object>> iteratorStack = new Stack<>();
-        Stack<VMenuBar> menuStack = new Stack<>();
-        VMenuBar currentMenu = widget;
-
-        while (itr.hasNext()) {
-            UIDL item = (UIDL) itr.next();
-            VMenuBar.CustomMenuItem currentItem = null;
-
-            final int itemId = item.getIntAttribute("id");
+                    if (moreItemUIDL.hasAttribute("icon")) {
+                        Icon icon = client.getIcon(
+                                moreItemUIDL.getStringAttribute("icon"));
+                        if (icon != null) {
+                            itemHTML.append(icon.getElement().getString());
+                        }
+                    }
 
-            boolean itemHasCommand = item.hasAttribute("command");
-            boolean itemIsCheckable = item
-                    .hasAttribute(MenuBarConstants.ATTRIBUTE_CHECKED);
+                    String moreItemText = moreItemUIDL
+                            .getStringAttribute("text");
+                    if ("".equals(moreItemText)) {
+                        moreItemText = "&#x25BA;";
+                    }
+                    itemHTML.append(moreItemText);
 
-            String itemHTML = widget.buildItemHTML(item);
+                    widget.moreItem = GWT.create(VMenuBar.CustomMenuItem.class);
+                    widget.moreItem.setHTML(itemHTML.toString());
+                    widget.moreItem.setCommand(VMenuBar.emptyCommand);
 
-            Command cmd = null;
-            if (!item.hasAttribute("separator")) {
-                if (itemHasCommand || itemIsCheckable) {
-                    // Construct a command that fires onMenuClick(int) with the
-                    // item's id-number
-                    cmd = () -> widget.hostReference.onMenuClick(itemId);
+                    widget.collapsedRootItems = new VMenuBar(true, widget);
+                    widget.moreItem.setSubMenu(widget.collapsedRootItems);
+                    widget.moreItem.addStyleName(
+                            widget.getStylePrimaryName() + "-more-menuitem");
                 }
-            }
 
-            currentItem = currentMenu.addItem(itemHTML, cmd);
-            currentItem.setId("" + itemId);
-            currentItem.updateFromUIDL(item, client);
-
-            if (item.getChildCount() > 0) {
-                menuStack.push(currentMenu);
-                iteratorStack.push(itr);
-                itr = item.iterator();
-                currentMenu = new VMenuBar(true, currentMenu);
-                client.getVTooltip().connectHandlersToWidget(currentMenu);
-                // this is the top-level style that also propagates to items -
-                // any item specific styles are set above in
-                // currentItem.updateFromUIDL(item, client)
-                if (ComponentStateUtil.hasStyles(getState())) {
-                    for (String style : getState().styles) {
-                        currentMenu.addStyleDependentName(style);
+                UIDL uidlItems = uidl.getChildUIDL(1);
+                Iterator<Object> itr = uidlItems.iterator();
+                Stack<Iterator<Object>> iteratorStack = new Stack<>();
+                Stack<VMenuBar> menuStack = new Stack<>();
+                VMenuBar currentMenu = widget;
+
+                while (itr.hasNext()) {
+                    UIDL item = (UIDL) itr.next();
+                    VMenuBar.CustomMenuItem currentItem = null;
+
+                    final int itemId = item.getIntAttribute("id");
+
+                    boolean itemHasCommand = item.hasAttribute("command");
+                    boolean itemIsCheckable = item
+                            .hasAttribute(MenuBarConstants.ATTRIBUTE_CHECKED);
+
+                    String itemHTML = widget.buildItemHTML(item);
+
+                    Command cmd = null;
+                    if (!item.hasAttribute("separator")) {
+                        if (itemHasCommand || itemIsCheckable) {
+                            // Construct a command that fires onMenuClick(int)
+                            // with the
+                            // item's id-number
+                            cmd = () -> widget.hostReference
+                                    .onMenuClick(itemId);
+                        }
                     }
-                }
-                currentItem.setSubMenu(currentMenu);
-            }
 
-            while (!itr.hasNext() && !iteratorStack.empty()) {
-                boolean hasCheckableItem = false;
-                for (VMenuBar.CustomMenuItem menuItem : currentMenu
-                        .getItems()) {
-                    hasCheckableItem = hasCheckableItem
-                            || menuItem.isCheckable();
-                }
-                if (hasCheckableItem) {
-                    currentMenu.addStyleDependentName("check-column");
-                } else {
-                    currentMenu.removeStyleDependentName("check-column");
-                }
+                    currentItem = currentMenu.addItem(itemHTML, cmd);
+                    currentItem.setId("" + itemId);
+                    currentItem.updateFromUIDL(item, client);
+
+                    if (item.getChildCount() > 0) {
+                        menuStack.push(currentMenu);
+                        iteratorStack.push(itr);
+                        itr = item.iterator();
+                        currentMenu = new VMenuBar(true, currentMenu);
+                        client.getVTooltip()
+                                .connectHandlersToWidget(currentMenu);
+                        // this is the top-level style that also propagates to
+                        // items -
+                        // any item specific styles are set above in
+                        // currentItem.updateFromUIDL(item, client)
+                        if (ComponentStateUtil.hasStyles(getState())) {
+                            for (String style : getState().styles) {
+                                currentMenu.addStyleDependentName(style);
+                            }
+                        }
+                        currentItem.setSubMenu(currentMenu);
+                    }
 
-                itr = iteratorStack.pop();
-                currentMenu = menuStack.pop();
+                    while (!itr.hasNext() && !iteratorStack.empty()) {
+                        boolean hasCheckableItem = false;
+                        for (VMenuBar.CustomMenuItem menuItem : currentMenu
+                                .getItems()) {
+                            hasCheckableItem = hasCheckableItem
+                                    || menuItem.isCheckable();
+                        }
+                        if (hasCheckableItem) {
+                            currentMenu.addStyleDependentName("check-column");
+                        } else {
+                            currentMenu
+                                    .removeStyleDependentName("check-column");
+                        }
+
+                        itr = iteratorStack.pop();
+                        currentMenu = menuStack.pop();
+                    }
+                }
             }
+        };
+        getLayoutManager().setNeedsHorizontalLayout(MenuBarConnector.this);
+        if (widget.mouseDownPressed) {
+            timer.schedule(getState().delayMs);
+            widget.mouseDownPressed = false;
+        } else {
+            timer.run();
         }
-
-        getLayoutManager().setNeedsHorizontalLayout(this);
     }
 
     @Override