Fix issue with SubMenuItems list not closing when SubMenu's open property is set to false

[zetro-nayatel]

Issue: When utilizing the SubMenu component with the open property set to false, the SubMenuItems list fails to disappear as expected.

Details: Upon setting open={false}, the SubMenuItems persist, contrary to the intended behavior. This discrepancy arises because setting open to false removes the class .ps-open but does not eliminate the inline styles (e.g., display: block) applied to the SubMenu content.

<div data-testid="ps-submenu-content-test-id" class="ps-submenu-content ps-open css-z5rm24" style="display: block; overflow: auto; height: auto;" open="">...</div>

[azouaoui-med]

can you share a piece of code or codesandbox highlighting the issue

[zetro-nayatel]

When the SubMenu component has open={false}, its submenu items don't close. The submenu itself closes, but its menuitems remains open.

<SubMenu
  ref={item.refVariable} 
  label={item.title}
  icon={item.icon}
  open={openSubmenu === item.title.toLowerCase()}
  onClick={() => handleSubmenuClick(item.title.toLowerCase())}
>
  {/* Submenu items go here */}
</SubMenu>

Now, I'm manually storing its reference and afterwards changing the CSS of SubMenu -> MenuItems {display:"none"}

[zkucora]

Hi! I have same problem. Created a code in codesandbox: https://codesandbox.io/p/sandbox/focused-greider-n4ys62

As you see if you click on any of Menuitem, the Submenu closes (the arrow goes back to >), but the submenu items are still showing. Same behaviour if you use closeOnClick={true} on Menu component. Even the sidebar is collapsed, clicking of any on Menuitem won't close the submenu items automatically.

[Vette1123]

I have the same issue, can you kindly solve it, its a huge bug that needs fix!

[Vette1123]

I want to close other open submenu when i open any ( have only 1 submenu open ), i can't achieve that.

[zkucora]

I want to close other open submenu when i open any ( have only 1 submenu open ), i can't achieve that.

My solution was for closing submenu when you click on any menuitem was css solution (i know its not nice atm, but its working):

in your css file needs this:

/ react-pro-sidebar override / .ps-menuitem-root { .ps-submenu-content { display: none !important; } }

.ps-menuitem-root.ps-open { .ps-submenu-content.ps-open { display: block !important; } }

[Vette1123]

@zkucora can you elaborate more?, like i have many sub-menus, i want to close other sub-menus (if any is open ) when i open any

[Vette1123]

@zkucora its working fine but if the sidebar is collapsed its fcked up ( but it has weird animation)

[azouaoui-med]

Hi! I have same problem. Created a code in codesandbox: https://codesandbox.io/p/sandbox/focused-greider-n4ys62

As you see if you click on any of Menuitem, the Submenu closes (the arrow goes back to >), but the submenu items are still showing. Same behaviour if you use closeOnClick={true} on Menu component. Even the sidebar is collapsed, clicking of any on Menuitem won't close the submenu items automatically.

would please try using onOpenChange instead of onClick

onOpenChange={(open) => setIsSubMenuOpen(open)}

[zkucora]

would please try using onOpenChange instead of onClick

onOpenChange={(open) => setIsSubMenuOpen(open)}

Nope, it does not work either. If you think that the solution is you mentioned above, will you be so kindly and link us a working sandbox sample ? Or just fork my sample and try modify it. Thx

[Vette1123]

@azouaoui-med is it possible to provide a proper way to close submenu when opening another one?, can you provide example for that?, also for closing submenus inside of a submenu when opening another submenu.

[zkucora]

@zkucora its working fine but if the sidebar is collapsed its fcked up ( but it has weird animation)

Yeah couse the position isn't good for submenu items, when submenu is open but collapsed.

Try add this to css :

.ps-submenu-content { transform: translate(270px, -50px) !important; transition: height 100ms; overflow: auto !important; height: auto !important; position: fixed !important; inset: unset !important; margin: 0px !important; }

.ps-collapsed .ps-submenu-content { transform: translate(80px, -50px) !important; }

[Vette1123]

@zkucora its working fine but if the sidebar is collapsed its fcked up ( but it has weird animation)

Yeah couse the position isn't good for submenu items, when submenu is open but collapsed.

Try add this to css :

.ps-submenu-content { transform: translate(270px, -50px) !important; transition: height 100ms; overflow: auto !important; height: auto !important; position: fixed !important; inset: unset !important; margin: 0px !important; }

.ps-collapsed .ps-submenu-content { transform: translate(80px, -50px) !important; }

its better now but do you have a solution for weird ui?, i mean transitions when opening another menu, its so disappointing that this library can't handle this.

[azouaoui-med]

would please try using onOpenChange instead of onClick onOpenChange={(open) => setIsSubMenuOpen(open)}

Nope, it does not work either. If you think that the solution is you mentioned above, will you be so kindly and link us a working sandbox sample ? Or just fork my sample and try modify it. Thx

https://codesandbox.io/p/sandbox/react-pro-sidebar-submenu-error-forked-6jsshq?file=%2Fsrc%2FComponents%2FHeader%2FHeader.js%3A57%2C54

Edit: i see that when you click on the below menuItem doesn't close the submenu !! checking ...

[zkucora]

its better now but do you have a solution for weird ui?, i mean transitions when opening another menu, its so disappointing that this library can't handle this.

Maybe you need to play with transitions too ... Sorry i dont see the source code of this library, so dunno what is really happening in backside. I'm just trying making solution for myself atm :) Btw i needed submenu items beside submennu, not below submenu, so i changed the positioning, but i dont need any transition... But if developer fixing this bug, i think everything will be fine.

[Vette1123]

i really hope this get fixed soon, its really blocking me, all i need is easy functionality to close other open submenus when i open another one.

[zkucora]

i really hope this get fixed soon, its really blocking me, all i need is easy functionality to close other open submenus when i open another one.

I did some tweek in my codesandbox : https://codesandbox.io/p/sandbox/focused-greider-n4ys62

I think its working as you wanted : closing every other submenu when one submenu is opened, and closing all submennus when you click on any menuitem. But it still have some strange behaviour when the menu is collapsed ... something isn't fully ok than.

[azouaoui-med]

fixed in v1.1.0

[azouaoui-med]

@azouaoui-med is it possible to provide a proper way to close submenu when opening another one?, can you provide example for that?, also for closing submenus inside of a submenu when opening another submenu.

@Vette1123 i added an example of using open prop to achieve your requirement

see example here

[Vette1123]

@azouaoui-med is it possible to provide a proper way to close submenu when opening another one?, can you provide example for that?, also for closing submenus inside of a submenu when opening another submenu.

@Vette1123 i added an example of using open prop to achieve your requirement

see example here

@azouaoui-med thank you,

can you provide example for closing submenus inside of a submenu if its closed?

Like if i have a submenu, and it has 3 submenus inside of it, i want to close these 3 submenus when the parent submenu closes

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.