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

fix: adds the MouseEventHandler type to close in Popover #1696

Merged
merged 4 commits into from
Aug 2, 2022

Conversation

eddysims
Copy link
Contributor

@eddysims eddysims commented Jul 18, 2022

Currently to use the close function within a button I need to invoke a new function:

<button onClick={() => close}>...</button>

It would be nice to be able to just call the close function directly from the onClick of an element so that we are not invoking this new function every time we call the component:

<button onClick={close}>...</button>

The reason for this is that the types for close and onClick do not quite line up. The button requires an MouseEventHandler type from React

image

This PR allows for that type to be added to the close function so that the example above will be valid.

@vercel
Copy link

vercel bot commented Jul 18, 2022

@eddysims is attempting to deploy a commit to the Tailwind Labs Team on Vercel.

A member of the Team first needs to authorize it.

@vercel
Copy link

vercel bot commented Jul 18, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
headlessui-react ✅ Ready (Inspect) Visit Preview Sep 2, 2022 at 7:57PM (UTC)
headlessui-vue ✅ Ready (Inspect) Visit Preview Sep 2, 2022 at 7:57PM (UTC)

@thecrypticace
Copy link
Contributor

thecrypticace commented Aug 2, 2022

Hey, thanks for the PR! ✨

I had to make a few tweaks — in this case MouseEventHandler is the type of onClick itself. We had to make sure that close has a compatible signature which means taking a MouseEvent<HTMLElement> as the first argument. This already worked implementation-wise — but the types didn't allow it. This should be out in the next tagged release but in the mean time you can install our insiders version using npm install @headlessui/react@insiders

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

Successfully merging this pull request may close these issues.

2 participants