headlessui icon indicating copy to clipboard operation
headlessui copied to clipboard

PopoverButton is not propagating parent events compared to MenuButton

Open rangelojc opened this issue 9 months ago • 0 comments

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

rangelojc avatar Feb 22 '25 13:02 rangelojc