headlessui
headlessui copied to clipboard
PopoverButton is not propagating parent events compared to MenuButton
As written, PopoverButton does not propagate parent events, it's as if there is an internal stopPropagation method assigned to it somewhere. I could not find a workaround.
See below code
<div onClick={() => console.log("parent event clicked!")}>
<Menu>
<MenuButton>Click Menu</MenuButton> {/* clicking this triggers parent click */}
<MenuItems>Menu shown</MenuItems>
</Menu>
<Popover>
<PopoverButton>Click Popover</PopoverButton> {/* clicking this does not trigger parent click */}
<PopoverPanel>Popover shown</PopoverPanel>
</Popover>
</div>
What package within Headless UI are you using?
@headlessui/react
What version of that package are you using?
v2.2.0
What browser are you using?
Chrome