bug: Nesting Collapse in Dropdown menu results in unintended Dropdown behaviour

[angus6b23]

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:

1. Wrap a collapse component (using details and summary element) inside a dropdown menu (display on hover)
2. Hover over the dropdown button, the menu display normally
3. Hover out, the menu disappear normally
4. Hover over somewhere near the position of the collapse component without hovering the dropdown button, the menu display unexpectedly

Please see the codepen for the action.

[github-actions[bot]]

Thank you @angus6b23 for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[andrianarivo]

Same here, nesting Dropdown > Accordion

[dvdokkum]

I'm also having this issue. It looks like this has come up before here: https://github.com/saadeghi/daisyui/issues/2761 but note that the provided working code example is no longer working... the collapse elements are clickable even when the dropdown is closed.

[jo-gross]

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.

[ptfw]

I have an issue that is very similar: a conflict between Dropdown Menu and Collapse/Accordion. I have a dropdown menu that, when open, is rendering over the top of a Collapse. even though the dropdown menu is z index above the collapse, when I click on a menu item, it activates the collapse peer input behind the menu item instead of following the anchor link within the dropdown menu item.