Skip to content
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

PopoverButton is not propagating parent events compared to MenuButton #3653

Open
rangelojc opened this issue Feb 22, 2025 · 0 comments
Open

Comments

@rangelojc
Copy link

rangelojc commented Feb 22, 2025

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 rangelojc changed the title PopoverButton is not propagating parent events PopoverButton is not propagating parent events compared to Menu Feb 22, 2025
@rangelojc rangelojc changed the title PopoverButton is not propagating parent events compared to Menu PopoverButton is not propagating parent events compared to MenuButton Feb 22, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant