Keeping MenuItem custom classes when updating styles (#17427)

Change-Id: I54b7e700148797f0145c4ec5f1802ea999142ab3

3 files changed, 85 insertions, 0 deletions

diff --git a/client/src/com/vaadin/client/ui/VMenuBar.java b/client/src/com/vaadin/client/ui/VMenuBar.java
index 08f70f4dde..823861534d 100644
--- a/client/src/com/vaadin/client/ui/VMenuBar.java
+++ b/client/src/com/vaadin/client/ui/VMenuBar.java
@@ -912,12 +912,24 @@ public class VMenuBar extends SimpleFocusablePanel implements
                         SUBMENU_CLASSNAME_PREFIX, "");
             }
 
+            String currentStyles = super.getStyleName();
+            List<String> customStyles = new ArrayList<String>();
+            for(String style : currentStyles.split(" ")) {
+                if(!style.isEmpty() && !style.startsWith(primaryStyleName)) {
+                    customStyles.add(style);
+                }
+            }
+
             if (isSeparator) {
                 super.setStyleName(primaryStyleName + "-separator");
             } else {
                 super.setStyleName(primaryStyleName + "-menuitem");
             }
 
+            for (String customStyle : customStyles) {
+                super.addStyleName(customStyle);
+            }
+
             if (styleName != null) {
                 addStyleDependentName(styleName);
             }
diff --git a/uitest/src/com/vaadin/tests/components/menubar/MenuItemStyleRemoved.java b/uitest/src/com/vaadin/tests/components/menubar/MenuItemStyleRemoved.java
new file mode 100644
index 0000000000..ea8bf5aec7
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/menubar/MenuItemStyleRemoved.java
@@ -0,0 +1,43 @@
+package com.vaadin.tests.components.menubar;
+
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.JavaScript;
+import com.vaadin.ui.MenuBar;
+
+public class MenuItemStyleRemoved extends AbstractTestUI {
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        MenuBar menuBar = new MenuBar();
+
+        MenuBar.MenuItem first = menuBar.addItem("first", null, null);
+        first.addItem("first sub-item 1", null, null);
+        first.addItem("first sub-item 2", null, null);
+        MenuBar.MenuItem second = menuBar.addItem("second", null, null);
+        second.addItem("second sub-item 2", null, null);
+        second.addItem("second sub-item 2", null, null);
+
+        addComponent(menuBar);
+        addButton("Add styles", new Button.ClickListener() {
+            @Override
+            public void buttonClick(Button.ClickEvent event) {
+                JavaScript.getCurrent().execute(
+                        "var x=document.getElementsByClassName('v-menubar-menuitem');" +
+                        " var i; for(i=0; i < x.length; i++)" +
+                        " {x[i].className += ' custom-menu-item'};");
+            }
+        });
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 17242;
+    }
+
+    @Override
+    public String getDescription() {
+        return "MenuItem's custom class names removed when hovering";
+    }
+}
diff --git a/uitest/src/com/vaadin/tests/components/menubar/MenuItemStyleRemovedTest.java b/uitest/src/com/vaadin/tests/components/menubar/MenuItemStyleRemovedTest.java
new file mode 100644
index 0000000000..2ba63587fe
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/menubar/MenuItemStyleRemovedTest.java
@@ -0,0 +1,30 @@
+package com.vaadin.tests.components.menubar;
+
+import com.vaadin.testbench.By;
+import com.vaadin.testbench.elements.ButtonElement;
+import com.vaadin.testbench.elements.MenuBarElement;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+import org.junit.Assert;
+import org.junit.Test;
+import org.openqa.selenium.WebElement;
+
+import java.util.List;
+
+public class MenuItemStyleRemovedTest extends MultiBrowserTest {
+
+    @Test
+    public void testCustomStyleShouldStayAfterMenuSelect() {
+        openTestURL();
+
+        $(ButtonElement.class).caption("Add styles").first().click();
+
+        MenuBarElement menu = $(MenuBarElement.class).first();
+        List<WebElement> elements = menu.findElements(By.className("custom-menu-item"));
+        Assert.assertEquals(2, elements.size());
+
+        menu.clickItem("first");
+        menu.clickItem("second");
+        elements = menu.findElements(By.className("custom-menu-item"));
+        Assert.assertEquals(2, elements.size());
+    }
+}