Reactive - Keep submenu open after selection

I have a menu that contains a Submenu. This is implement as shown below;

Whenever I open the submenu and click on one of it's items the page opens but the submenu closes. I rather want it to stay open. 

Note that having it open by default is no issue, that's simply by adding the css class "open" to the ExtendedClass parameter. And I could of course create a whole elaborate mess of client actions and local variables to detect if I need to add the "open" class to the submenu but I was wondering if there is a nicer and cleaner method for this? 

Demo: https://vkoning.outsystemscloud.com/LeafletJSReactiveDemo/EventsToggleEvents
Download: https://www.outsystems.com/forge/component-overview/6907/leafletjs-reactive

note: No, this is not an advertorial in disguise. I really want to have a nice and clean solution for this problem and this application has and easy to share behavior of my issue.

I also noticed that by adding the css class "open" to the submenu you get a ugly flicker when you perform a page transition. 

Vincent Koning wrote:

Hello
I was struggling with the same issue in a reactive app - while using the submenu component - and I just figured out a solution.

You can create a CSS like below:

SyntaxEditor Code Snippet

.layout-side .submenu.active .submenu-items {
    display: flex;
}

Hi Claiton, 

I'll test this out and see if it works. I also created a support ticket for this but the answer was something along the lines of "live with it" so that was not really helpful. 

Hi guys!

I'm having the same issue with a lot of customers complaining they want the menus to be open.

Currently, there's no easy way to do this, but cloning the SetActiveMenuItems action, I can do a workaround for making the menu opened by default.

This is not pretty, but works and is a simple solution.

But the problem is not solved, because there's this listener on the LayoutReady action, that closes the menu whenever I click outside...

Can you please make a parameter so I'm able to decide if I want to keep the menu opened or closed?

I have already 10 costumers complaining about this, and this could save probably a lot more costumers..

Cheers!

Just to add a bit more of insights. Actually, this could make sense on LayoutTop, but not on LayoutSideMenu.

If you think the parameter is not an option, you could at least verify the layout being used on the screen. Although in my projects, sometimes I have custom layouts, so the parameter is always welcome that will give us more freedom of choice.

Hope this can be looked into in the next version of OutSystems UI! :)

Cheers!

I have created an Idea for this to get it a bit more traction. https://www.outsystems.com/ideas/9431/reactive-keep-submenu-open-after-selection

@Alexandre: Please post you use-case also in this idea please!

Ok, will do :)

Hi Vincent Koning,

Thanks for the report!

We will be looking into this, particularly for the Layout Side Menu.

Best regards,

Bernardo Cardoso

Hi Bernardo,

Thanks for the confirmation. I also found a strange behavior bug regarding the Floating Actions. What is the best way to report these? Via the Forum, Ideas of Support?

Greetings,

Vincent

Hi Vincent Koning,

I would the OutSystems UI page on the Forge, under Support tab, is the best place. That being said, you can share that here if you want!

Best regards,

Bernardo Cardoso