Vincent Koning
Champion
Rank: #87
167Views
12Comments
Reactive - Keep submenu open after selection
Question

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.

0
0
on 2020-04-23
Copy link to comment
Vincent Koning
Champion
Rank: #87

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

0
0
on 2020-04-23
Copy link to comment
Claiton Faleiro
Rank: #9504

Vincent Koning wrote:

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

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;
}
0
0
on 2020-06-23
Copy link to comment
Vincent Koning
Champion
Rank: #87

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. 

0
0
on 2020-06-24
Copy link to comment
Alexandre Santos
Champion
Rank: #102

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!

1
0
on 2020-08-10
Copy link to comment
Alexandre Santos
Champion
Rank: #102

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!

1
0
on 2020-08-10
Copy link to comment
Vincent Koning
Champion
Rank: #87

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!

2
0
on 2020-08-11
Copy link to comment
Alexandre Santos
Champion
Rank: #102

Ok, will do :)

0
0
on 2020-08-11
Copy link to comment
Bernardo Cardoso
Staff
Rank: #2169

Hi Vincent Koning,


Thanks for the report!

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


Best regards,

Bernardo Cardoso

0
0
on 2020-08-12
Copy link to comment
Vincent Koning
Champion
Rank: #87

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

0
0
on 2020-08-12
Copy link to comment
Bernardo Cardoso
Staff
Rank: #2169

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

 

0
0
on 2020-08-14
Copy link to comment

Hello guys,

I work around this problem with a if clause inside the extendedClass..

As in the traditional web development you could control the ActiveItem input with an static entity.

I hope it helps you.

1
0
on 2020-12-30
Copy link to comment
Alexandre Santos
Champion
Rank: #102

Hi Guilherme,


The issue was solved by OutSystems in a new release, somewhere between September and October I think.

Although that would not solve the issue that I was reporting, but thanks for your time anyway. :)


Cheers!

0
0
9 days ago
Copy link to comment