Menu bar does not open on first click when certain sidebar elements have focus

[iamfraggle]

Bug Description:

When certain sidebar elements have focus, clicking on the menu bar does not open the selected menu group, but appears to 'weaken' the focus on the element, thus another click will open the menu group.

Clicking again on the menu group to close it returns focus to the original element and so the bug will repeat if attempting to reopen the menu.

For an example of 'weakening focus': when the search input box has focus, the first click on the menu bar will remove the "(up/down for history)" text from the input box, but the insertion caret will still be flashing.

Steps to Reproduce:

1. Click inside an affected sidebar panel or on it's icon in the side panel selector
2. Click on the menu bar

Here is the results of my experimentation on whether different sidebar elements exhibit the bug behaviour (Yes means affected):
Explorer

• Explorer heading: No
• Open Editors sub-heading: No
• Open Editors box: No
• Project Folder sub-heading: No
• Project Folder box: Yes
  Search
• Search heading: No
• Search input box: Yes (and each toggle box - Match case, etc)
• Toggle replace button: Yes
• Replace input box: Yes
• Search results box: Yes
  Source Control
• Source Control heading: No
• Rest of box: Yes
• (Note that due to Extension pages do not load and extensions do not install #14001 I cannot install any SCM extensions, thus I cannot try any other elements)
  Debug
• No elements appear to be affected
  Extensions
• Extensions heading: No
• Search input box: Yes
• Recommended sub-heading: No
• Recommended box: Yes
• Installed sub-heading: No
• Installed box: Yes
  Testing
• Testing heading: No
• Test explorer sub-heading: No
• Test explorer box: Yes
• Test runs sub-heading: No
• Test runs box : No

Additional Information

• Operating System: Windows 10 (Build 19045.4651)
• Theia Version: 1.51.0

[JonasHelming]

Thank you for the very detailled test!
I have issue reproducing this, though, but I might be doing something wrong.

I open the search view
do nothing (input field is focussed)
OR I explicitly set the focus in the input field.
Then I open a menu, e.g. "File" => This works for me.

Am I doing the right steps? Maybe this is a Windows issue only, I am on Linux.

[tsmaeder]

I'm on Windows and simply doing this reproduces the issue:

1. Left-Click on the "Explorer" view icon in the right side bar
2. Left-Click on "Selection" in the window menu bar.
3. Observe: the menu does not open

[tsmaeder]

I think the relevant difference is whether the window.titleBarStyle preference is "native" or "custom". "Custom" has the problem, "native" doesn't.

[JonasHelming]

@tsmaeder Could you decide on a prio and add it to #13192 please?

[tsmaeder]

While it's a clearly a bug, I would classify this as low prio:

1. It is easily worked around by simply clicking again or using the native title bar
2. I've been using Theia as my only IDE for a year and I've never noticed it: the case where you click on a sidebar element and then immediately on the main menu is just not something one would often do: usually when you reveal a sidebar item, you click on something inside that sidebar item as the first thing.

@iamfraggle do you have a frequent workflow that is hindered by this issue?

[iamfraggle]

I've just been trying Theia IDE out for the first time, so no frequent workflow. I agree that it's a nuisance rather than a showstopper.

[pchuong]

I also encounter this issue in our product after upgrading to v1.53.2 from v1.46.0, this also appear to be an issue with "Eclipse Theia IDE". "Eclipse Theia IDE" is using the custom titleBarStyle by default. This issue is reproducible on both Windows and Linux.

I do agree that this is not a showstopper issue, but this is a very poor OOB user experience for our customers that are switching from Eclipse to Theia.

[pchuong]

Having to click on the menu item twice might be OK, but when you move the mouse across other top level menu item, it does not automatic open the other menu.

[pchuong]

This issue is introduced by this change, #13720.

Comment out the line to handle the this.menuProvider.onDidChange in the browser-menu-plugin.ts file will keep the menu open. But I don't know what the necessary change is required to fix this issue in order to keep the intended behavior of the onDidChange event handler.

[pchuong]

After debugging the issue, this change is working for when I test with native and custom setting. Is this the right fix?

This change is for the browser-menu-plugin.ts file, showMenuBar method. I changed the code to remember the menuBar activeIndex and restore the activeIndex and reopen the active menu after the menu is updated.

    protected showMenuBar(menuBar: DynamicMenuBarWidget, preference = this.getMenuBarVisibility()): void {
        if (preference && ['classic', 'visible'].includes(preference)) {
            const index = menuBar.activeIndex;
            menuBar.clearMenus();
            this.fillMenuBar(menuBar);
            menuBar.activeIndex = index;
            menuBar.openActiveMenu();
        } else {
            menuBar.clearMenus();
        }
    }

[JonasHelming]

@pchuong It seems you found a solution to the issue. Would you be up to create a contribution fixing this?