[MenuBar]: Removing an item's class name can lead to empty menu bar on reattach

[stefanuebe]

Description

We have the use case, that a dialog gets closed and opened due 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

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 ;) )

item.getElement().executeJs("").then(unused -> {
      item.removeClassName("foobar");
});

Environment

Vaadin version(s): 24.4.17 / 24.5.5
OS: Windows 11

Browsers

Chrome