antdesign sider menu popup hangs on collapsed

when manually setCollapsed(true) on antdesign sider, the selected key menu popup will linger

19 Replies

kapa.ai•11mo ago

Hi @ganuzaz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The behavior you're experiencing might be due to the way Ant Design's <Sider> component handles its collapsed state. When you manually set collapsed to true, the selected menu item might still be visible because the <Menu> component inside the <Sider> component doesn't automatically close its submenus. To ensure the selected menu item doesn't linger, you can give the <Menu> component a theme of 'dark'. This can be done by adding theme='dark' to the <Menu> component inside the <Sider> component, as shown in the following code snippet:

<AntdLayout.Sider  
  collapsible  
  collapsed={collapsed}  
  onCollapse={(collapsed: boolean): void => setCollapsed(collapsed)}  
  collapsedWidth={isMobile ? 0 : 80}  
  breakpoint='lg'  
  style={isMobile ? antLayoutSiderMobile : antLayoutSider}>  
  <RenderToTitle collapsed={collapsed} />  
  <Menu  
    theme='dark'  
    selectedKeys={[selectedKey]}  
    defaultOpenKeys={defaultOpenKeys}  
    mode='inline'  
    onClick={() => {  
      if (!breakpoint.lg) {  
        setCollapsed(true)  
      }  
    }}>  
    {renderSider()}  
  </Menu>  
</AntdLayout.Sider>

<AntdLayout.Sider  
  collapsible  
  collapsed={collapsed}  
  onCollapse={(collapsed: boolean): void => setCollapsed(collapsed)}  
  collapsedWidth={isMobile ? 0 : 80}  
  breakpoint='lg'  
  style={isMobile ? antLayoutSiderMobile : antLayoutSider}>  
  <RenderToTitle collapsed={collapsed} />  
  <Menu  
    theme='dark'  
    selectedKeys={[selectedKey]}  
    defaultOpenKeys={defaultOpenKeys}  
    mode='inline'  
    onClick={() => {  
      if (!breakpoint.lg) {  
        setCollapsed(true)  
      }  
    }}>  
    {renderSider()}  
  </Menu>  
</AntdLayout.Sider>

This code is extracted from the Refine documentation (https://refine.dev/docs/api-reference/antd/migration-guide/v4-to-v5/). If this doesn't solve your issue, you might need to manually control the openKeys prop of the <Menu> component to ensure that submenus are closed when the sider is collapsed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

<@149140198213550080> kapa.ai is still learning and improving, please let us know how it did by reacting below

rare-sapphire•11mo ago

hello @ganuzaz I couldn't understand the problem. can you explain me more please ?

solid-orange•11mo ago

for example, i have this on the sider

solid-orange•11mo ago

if i click on branch, i auto closed it using setCollapsed(true)

solid-orange•11mo ago

after that this happens

solid-orange•11mo ago

the popup opens by itself i have searched the antdesign and found nothing, maybe its wrong on my part basically i wanted the sider to close after a menu is clicked

rare-sapphire•11mo ago

I understand. thanks for clear explanation.I will debug and return you as soon as possible can you provide reproducible example for this ? i couldn't reproduce

solid-orange•11mo ago

hmm i swizzled it here is the sider code

solid-orange•11mo ago

https://pastebin.com/XMnVLnBY

Pastebin

import React, { CSSProperties, useState } from "react";import { us...

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

solid-orange•11mo ago

is this enough?

rare-sapphire•11mo ago

thanks i will try default <ThemedSiderV2> does not seems have issue. but this has bugs. I will debug the code if I find time.

solid-orange•10mo ago

alr thanks a lot, cause i dont know what triggered the popup Is there any progress on this, or should i upgrade and reswizzle the component?

rare-sapphire•10mo ago

i couldn't look your code but default it seems ThemedSiderv2 has no problems

solid-orange•10mo ago

can i look on how you automatically hide the sider using ThemedSiderV2?

rare-sapphire•10mo ago

https://github.com/refinedev/refine/blob/next/packages/antd/src/components/themedLayoutV2/sider/index.tsx#L67 const breakpoint = Grid.useBreakpoint(); is always changing when window.resize after that we are returning is if mobile

  const breakpoint = Grid.useBreakpoint();

    const isMobile =
        typeof breakpoint.lg === "undefined" ? false : !breakpoint.lg;

 if (isMobile) {
        return renderDrawerSider();
}

  const breakpoint = Grid.useBreakpoint();

    const isMobile =
        typeof breakpoint.lg === "undefined" ? false : !breakpoint.lg;

 if (isMobile) {
        return renderDrawerSider();
}

solid-orange•10mo ago

what i meant is how to automatically make the sider collapsed when one of the menu is clicked the one that you gave is to hide it completely right?

solid-orange•10mo ago

https://codesandbox.io/p/sandbox/lucid-dirac-vntvnv?embed=1 here is the sandbox

lucid-dirac-vntvnv

solid-orange•10mo ago

how can i make the sider collapse automatically when i clicked one of the menu?? i swizzled the themedlayoutv2 and added

            onClick={() => {
              setSiderCollapsed(true);
            }}

            onClick={() => {
              setSiderCollapsed(true);
            }}

on the Menu.Item component but it doesnt work properly