-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bug: Nesting Collapse in Dropdown menu results in unintended Dropdown behaviour #3116
Comments
Thank you @angus6b23
for reporting issues. It helps daisyUI a lot 💚
|
Same here, nesting Dropdown > Accordion |
I'm also having this issue. It looks like this has come up before here: #2761 but note that the provided working code example is no longer working... the collapse elements are clickable even when the dropdown is closed. |
I had the same problem, my first workaround was to implement a listener watching the open/close change to set an local state which hides the collapse when the dropdown was closed. const [isLocalMenuOpen, setIsLocalMenuOpen] = useState(false);
useEffect(() => {
const dropdown = dropdownContainerRef.current;
const handleFocus = () => {
setIsLocalMenuOpen(true);
};
const handleBlur = () => {
setIsLocalMenuOpen(false);
};
if (dropdown) {
dropdown.addEventListener('focus', handleFocus);
dropdown.addEventListener('blur', handleBlur);
}
return () => {
if (dropdown) {
dropdown.removeEventListener('focus', handleFocus);
dropdown.removeEventListener('blur', handleBlur);
}
};
}, []);
...
<div className={`collapse-content ${isLocalMenuOpen?'':'hidden'}`}>
... But in the end, I wasn't happy with this approach, so I scrapped it and implemented something on my own. If this gets resolved, I'll give it another try. |
What version of daisyUI are you using?
v4.12.10
Which browsers are you seeing the problem on?
All browsers
Reproduction URL
https://codepen.io/Angus-Wan/pen/JjqQgMq
Describe your issue
Steps to reproduce:
Please see the codepen for the action.
The text was updated successfully, but these errors were encountered: