[OutSystems UI] Submenu auto close after clicking a button or link action
Forge component by OutSystems R&D
Application Type
Reactive
Service Studio Version
11.10.19 (Build 41208)

I wrote some Javascript in OnReady of the Menu to add class "open" to the active menu element to keep the submenu items list expand when the main menu is active. But the problem is whenever I click on a button or link action on the screen, the active menu keeps removing the class "open". However, this is solved if I refresh the whole page, and then it will work just fine for the rest. Do you have any idea about this and how to solve this but not by refreshing the website?

mvp_badge
MVP

Hi Linh,

The general behaviour of the Submenu items list is to get collapsed even though the main menu is active. Still, I doubt the user-friendliness based on this requirement.

The solution which I could suggest for the mentioned use case is

  1. Create OnReady event handler for Menu Block
  2. Introduce a JS node within the OnReady event handler flow
  3. Define the below-mentioned JS code in the same JS node

JS Snippet:

var activeSubMenu = document.querySelector('.submenu.is--dropdown.active');

var openActiveSubMenu = function() {
   if (!activeSubMenu.classList.contains('open')) {
       activeSubMenu.classList.add('open');
    }
};

if (activeSubMenu) {
    openActiveSubMenu();
    document.addEventListener('click', openActiveSubMenu, false);
}


Hope this helps you!


Kind regards,

Benjith Sam

Hi Benjith ,

I have the same problem in my application. I tried your JS code in OnReady event, but it does not work.

.submenu.is--dropdown.active

It seems that ".active" class do not exsit in submenu.

Do you have any other soluton about this problem? Thank u.

A08783F9B856469c8201AA3305185896.png

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.