Side nav menu with MaterialCollapsible doesn't close active subitems when another one is open

[andreififiita]

When using a side nav menu with multiple items that have submenu items (MaterialCollapsible), when you open a subitem, the items that were already open do not close. Expected behavior: the side nav menu here https://gwtmaterialdesign.github.io/gwt-material-demo

I am using a MaterialSideNavMini:

sidenav = new MaterialSideNavMini() ;
sidenav.setWidth(250);
boolean showOnAttach = ParserUtils.toBoolean(Cookies.getCookie("showOnAttach"), true);
sidenav.setShowOnAttach(showOnAttach );
sidenav.setAllowBodyScroll(false);
sidenav.setAutoHideOnResize(false);
sidenav.setId(activates);
sidenav.setCloseOnClick(EVTContext.isSmallDeviceMode());		
sidenav.setAlwaysShowActivator(true);

Adding a collapsible item:

MaterialCollapsibleItem item = new MaterialCollapsibleItem();
MaterialCollapsibleHeader h1 = new MaterialCollapsibleHeader();		
MaterialCollapsible mc = new MaterialCollapsible();
MaterialCollapsibleBody body1 = new MaterialCollapsibleBody();
for (MainMenuItem subitem : submodules) {
	EMaterialLink sublink = createNavLink(subitem);
	sublink.setIconType(null);	
	body1.add(sublink);
}
		
h1.add(link);
item.add(h1);
item.add(body1);
mc.add(item);
sidenav.add(mc);

As debug information: the "active" class of collapsible-header and its parent "li" are being removed, but the collapsible-body element is still shown (it is not animated to be hidden)

[andreififiita]

I took a look at the element structure of https://gwtmaterialdesign.github.io/gwt-material-demo and it seems that there is only one MaterialCollapsible containing all of the menu items that behave like a tree, so maybe the side nav doesn't properly work (because probably wasn't designed?) with multiple items of type MaterialCollapsible

[andreififiita]

Also, the MaterialCollapsibleItem .setActive() method contains this code:

...
    if (active) {
                if (parent.isAccordion()) {
                    parent.clearActive();
                }
                ...
            }
...

That means when you programmatically setActive an item inside a MaterialCollapsibleBody, all the MaterialCollapsilbe's elements will close (in accordion mode). Is there a reason for this?

[kevzlou7979]

Yeah there are differences when we us an accordion or without it. Check https://gwtmaterialdesign.github.io/gmd-core-demo/#collapsible under Expandable Section.