[Bug]: Popover.Button is clobbering the `onClick` prop

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.4.1

What browser are you using?

Chrome, Firefox, etc.

Reproduction repository

https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/components/popover/popover.tsx#L475

Describe your issue

Looking at the source, it seems Popover.Button is clobbering any existing onClick prop on the button.

This prevents any code to be run before the Popover.Button’s own handleClick logic.

Such code would be useful to override the Popper JS positioning logic dynamically before the popper itself is displayed, something that can’t always be done with the static options passed to usePopper(). For example, I’m trying to position the popper horizontally with respect to the event.clientX, as shown by Popper JS’s author here.

I believe calling any existing onClick prop at the top on handleClick, with the current event, would address this problem.

Thank you

[vnugent]

I’m having a similar issue – I need to save user selections on the Popover to a global state object before closing. This hack appears to work for me:

<div onClick={() => {
              console.log('#onclick')
              doSomething() // save states or do something imperatively
            }}>
      <Popover.Button>Apply</Popover.Button>
</div>

[RobinMalfait]

Hey! Thank you for your bug report! Much appreciated! 🙏

This should be fixed by #1265, and will be available in the next release. The PR allows you to write your own event handlers like onClick, onKeyDown, … even if we also provide those. Your handlers will be executed before ours which gives you an opportunity to do anything to the event (even event.preventDefault()) if you would like to for whatever reason.

You can already try it using npm install @headlessui/react@insiders or yarn add @headlessui/react@insiders.