antdesign sider menu popup hangs on collapsed
when manually setCollapsed(true) on antdesign sider, the selected key menu popup will linger
19 Replies
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:
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:
----------------------<@149140198213550080> kapa.ai is still learning and improving, please let us know how it did by reacting below
optimistic-gold•12mo ago
hello @ganuzaz I couldn't understand the problem. can you explain me more please ?
optimistic-gold•12mo ago
for example, i have this on the sider
![No description](https://cdn.answeroverflow.com/1156526212701753444/image.png)
optimistic-gold•12mo ago
if i click on branch, i auto closed it using setCollapsed(true)
optimistic-gold•12mo ago
after that this happens
![No description](https://cdn.answeroverflow.com/1156526337872379904/image.png)
optimistic-gold•12mo 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
optimistic-gold•12mo 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
optimistic-gold•12mo ago
hmm i swizzled it
here is the sider code
optimistic-gold•12mo 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.
optimistic-gold•12mo ago
is this enough?
optimistic-gold•12mo 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.
optimistic-gold•12mo 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?
optimistic-gold•12mo ago
i couldn't look your code but default it seems ThemedSiderv2 has no problems
optimistic-gold•12mo ago
can i look on how you automatically hide the sider using ThemedSiderV2?