Allow custom id attribute to <Listbox.Button />

[mgcrea]

Needed to use an external label for my <Select />-like component (In my case the label is part of a generic <FormItem /> that manages validation for form items). And unfortunately you currently can't override the <Listbox.Button /> id attribute. This PR fixes that.

[vercel]

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

A member of the Team first needs to authorize it.

[vercel]

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

Name	Status	Preview	Updated
headlessui-react	✅ Ready (Inspect)	Visit Preview	Nov 16, 2022 at 5:07PM (UTC)

[RobinMalfait]

Hey! Thank you for your PR!
Much appreciated! 🙏

I'm going to say no to this PR for now because this will leave it in an inconsistent state for all other components. In some components it isn't as easy to set the id right now (because it comes from state via context from the root component).

Would using our Listbox.Label component instead work for you?
https://headlessui.com/react/listbox#using-a-custom-label

Thanks!

[mgcrea]

Would using our Listbox.Label component instead work for you?

Unfortunately I can't use the Listbox.Label because my label is not inside the Listbox, it's a sibling managed by another component.

Setting an id does not make sense for most components but for this one it does since you need it to leverage the native focus on click. Would merge this as there is no breaking change at all and is a one-liner for a valid use-case.