Guttorm
February 7, 2025, 1:17pm
1
In my title bar I have a MenuBar with MenuItems for New, Save, Delete.
When I add the class it works as expected, but when I remove it again, all the MenuBarItems in the MenuBar disappears from the web page!
When dirty:
After save:
If i comment out the line where I do saveButton.removeClassName("screen-dirty"); then it works again
I’ve tried to reproduce in a small example view, but then it works just fine.
Any idea what might be going on?
knoobie
February 7, 2025, 1:58pm
2
Guttorm
February 7, 2025, 2:15pm
3
Sounds related but that one was closed in 24.5.0 (?)
It seems pointless to report it as long as I can’t provide a reproducible example
Stefan.27
February 7, 2025, 3:29pm
4
Does this issue match your use case? If your use case is similar, but a bit different, please add a comment so that the product team also knows about that case
opened 07:37AM - 26 Nov 24 UTC
bug
vaadin-menu-bar
Severity: Major
Impact: Low
### Description
We have the use case, that a dialog gets closed and opened du… e to some user interactivity (selecting things in a grid and so on). Inside the dialog there is a menu bar with different menu items. Some of these menu items "react" on the current selection and get class names added or removed.
The combination of removing class names from menu items and reattaching the menu bar (due to the dialog close and open) breaks the client side. From the dom and the menubar connector, it seems, that (for whatever reason) the above described combo produces a list of "hidden" menu items on the client side, which then lead to an empty menu bar in the dom.
But - and this is the weird part of the issue - the effect only occurs every second time. So the menu bar switches between being filled correctly and being empty.
### Expected outcome
Removing a menu item's class name should work :)
### Minimal reproducible example
```java
MenuBar menuBar = new MenuBar();
MenuItem item = menuBar.addItem("Sample");
add(new Button("Execute", event -> {
remove(menuBar);
item.removeClassName("foobar");
add(menuBar);
}));
add(menuBar);
```
### Steps to reproduce
1. Add the snippet and open the application
2. The menu bar should be shown, showing the "Sample" item.
3. Click execute: the menu bar should now be empty and therefore "hidden".
4. Click execute again: the menu bar should now be displayed correctly.
5. Repeat 3 and 4 as long as you want :D
### Workaround
This issue only occurs, when the class is removed before reattaching the menu bar. If the menu bar is reattached and then the class name is removed, this issue does not occur. However wrapping the "remove class" inside a normal attach listener or a node runWhenAttached does not help.
The only working workaround I found is to delay the class name removal using an executeJs. And even this may break, when called very often and fast in a row (by a wild click user for instance ;) )
```java
item.getElement().executeJs("").then(unused -> {
item.removeClassName("foobar");
});
```
### Environment
Vaadin version(s): 24.4.17 / 24.5.5
OS: Windows 11
### Browsers
Chrome
