Menu Bar Items Disappear on Hover After Upgrading Theia from 1.59 to 1.61

[AnirudhBoddu]

Hi everyone,

We've recently upgraded our application from Theia 1.59 to 1.61, and encountered a strange issue with the menu bar behaviour.

In our application, we extend MenuContribution and use MenuModelRegistry to customize the menu bar. We rely on one of the default menu items provided by Theia and hide the rest using CSS:

/* Hide the first 7 menu items */
.lm-MenuBar-item:nth-child(-n + 7) {
    display: none;
}

This approach worked fine in 1.59. However, after upgrading to 1.61, we noticed that hovering over any menu item causes all of them to disappear. Refreshing the page temporarily restores them, but the issue recurs on hover.

The browser console shows the following error:

2025-08-04T13:16:03.673Z root ERROR RangeError: Invalid array length
    at DynamicMenuBarWidget.onUpdateRequest (https://plankton-maple-candy.tribalnova.com/bundle.js:23816:23)
    at DynamicMenuBarWidget.processMessage (https://plankton-maple-candy.tribalnova.com/bundle.js:11577:22)
    at invokeHandler (https://plankton-maple-candy.tribalnova.com/bundle.js:8690:21)
    at sendMessage (https://plankton-maple-candy.tribalnova.com/bundle.js:8444:13)
    at runMessageLoop (https://plankton-maple-candy.tribalnova.com/bundle.js:8741:17)
    at https://plankton-maple-candy.tribalnova.com/bundle.js:8418:42

It appears that the menu bar logic is attempting to access a DOM element that no longer exists due to our CSS-based hiding strategy.

My Questions:

1. Is hiding menu items using nth-child CSS selectors considered a safe or recommended approach in Theia?
2. Has there been any change in the menu bar implementation between 1.59 and 1.61 that could explain this behaviour?
3. What is the recommended way to hide or remove irrelevant menu items in Theia without causing runtime errors?

Any guidance or suggestions would be greatly appreciated!

Thanks in advance.

[msujew]

Hey @AnirudhBoddu,

the recommended approach to hiding/removing menu items is by using the unregisterMenuAction method of the MenuModelRegistry. The issue you're experiencing is likely due to our migration from Phosphor.js to Lumino.

[fayakun-it-consulting]

@msujew it smells like such problems might get resolved by our proposal am I wrong?

[msujew]

such problems might get resolved

I wouldn't call this a problem: When you include a Theia extension it automatically picks up the respective menu entries. This is by design. If adopters want to remove them again, they can do so via the offered API. I don't see where the problem is.

[fayakun-it-consulting]

such problems might get resolved

I wouldn't call this a problem: When you include a Theia extension it automatically picks up the respective menu entries. This is by design. If adopters want to remove them again, they can do so via the offered API. I don't see where the problem is.

I am not fond of the micro elements from Theia plugin mechanisms, I am learning gradually by reading the problems encountered by adopters.

[msujew]

Ok, you're entitled to your opinion on this. However, as said - not a problem - it's working as intended. The same request as in #16033 (reply in thread) applies here as well. Please keep the discussion on topic. We already have 4 discussions related to the OSGi topic.

[AnirudhBoddu]

Thanks, @msujew. Your guidance and this discussion thread (#15685 (comment)) helped me address the issue I faced.

[AnirudhBoddu]

I have successfully used the MenuModelRegistry.unregisterMenuNode() method to remove any default menus that are not needed. Thank you for your support, team.