antdesign sider menu popup hangs on collapsed

when manually setCollapsed(true) on antdesign sider, the selected key menu popup will linger
K
kapa.ai209d 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: ----------------------
K
kapa.ai209d ago
<@149140198213550080> kapa.ai is still learning and improving, please let us know how it did by reacting below
O
other-emerald209d ago
hello @ganuzaz I couldn't understand the problem. can you explain me more please ?
R
ratty-blush209d ago
for example, i have this on the sider
No description
R
ratty-blush209d ago
if i click on branch, i auto closed it using setCollapsed(true)
R
ratty-blush209d ago
after that this happens
No description
R
ratty-blush209d 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
O
other-emerald209d 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
R
ratty-blush209d ago
hmm i swizzled it here is the sider code
R
ratty-blush209d ago
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.
R
ratty-blush209d ago
is this enough?
O
other-emerald209d 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.
R
ratty-blush203d 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?
O
other-emerald203d ago
i couldn't look your code but default it seems ThemedSiderv2 has no problems
R
ratty-blush202d ago
can i look on how you automatically hide the sider using ThemedSiderV2?
O
other-emerald202d 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();
}
R
ratty-blush201d 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?
R
ratty-blush201d 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
More Posts
useGetToPath error<Button onClick={() => { go({ to: getToPath({ useEditableTable tableProps datatypehi, i have a question. why do the dataSource inside the tableprops property from useEditableTable oReact Query Options: Enabled change does not disable/pause requestsHi everyone, I am currently developing a page that incorporates various filters, some of which can AuthPage AntDIs there a convenient way to only render the autProvider section in the AuthPage (LoginPage) and do Seeking Advice: Choosing Refine JS for News Website Admin Dashboard?Hey everyone, I'm a beginner developer, and I'm working on a news website project that needs an admSite Title refine v4Hey, I want to change site title. The one which appear on chrome tab. I am update site logo(favicon)Is there any way to prevent hook from calling api if variable is still undefined?Is there any way to prevent hook from calling api if variable is still undefined in a single componeDragger on drop = false still calling api on dragdragger is calling api when there is no actionUsing refine as an admin panel (beginner)I am building admin panel for news website to upload, delete, update and overall controll news conterename refine default create button in the listhow to rename create button in list which is coming by giving create resourceInvalid hook call. Hooks can only be called inside of the body of a function componenthello, i got this error Invalid hook call. Hooks can only be called inside of the body of a functuseEditableTableHi, i notice that whenever I tried to fetch data using useEditableTable it sends the query with thisuseEditableTable short glitchI'm looking at `useEditableTable` from antd and the thing is there is a short glitch when pressingUpgrade Ant Design from v4 to v5 not workingI am trying to upgrade Ant Design from v4 to v5 so that I can upgrade Refine. As per your docs, I amHandle Errors inside of Forms being posted to a custom APIHey everyone! We're using Refine to such a great extend and I'm very thankful for all the work that How can I just see the current fields value?So this seems like a really dumb question, but using refine, its really difficult to use the value oHow to hide edit button action on specific row at list resourcehiding edit action for specific data in list resourceUnable to modify login error messageIn this documentation https://refine.dev/docs/api-reference/core/components/auth-page/#login Under aredirect to edit after create successi want to redirect user to edit page with its id after create is successfuladding data from useCustom in useForm default values``` const { data } = useCustom({ method: "get", url: "/advertisers/initialize",