Custom Label component not working for headlessui components

[ben-ryder]

Describe the bug Custom labels are not working for headlessui components because their components always set their own ID internally. This means that custom labels are not associated with the correct elements, even if you've passed an id to the given component.

Version All versions

To Reproduce Look at the aria labels/for attribute on the label and element of the select component: https://jigsaw.benryder.dev/?path=/story/select--default

Expected behavior My custom labels should be linked to the given headless UI components. I have custom functionality for the label so I can't just use the as prop.

Additional context This is an issue with the headlessui library itself. I may be able to help contribute this feature myself.
Depending on how this goes, I may also be able to get round this by repeating the className functionality of the isHidden prop on the Label component, which means I would be able to just use the <HeadlessUIComponent.Label> element, but it would be better for headlessui to handle the custom ids

[ben-ryder]

I have actually managed to fix this via as={Fragment}:

<Listbox.Label as={Fragment}>
    <Label isHidden={props.hideLabel || false}>{ props.label }</Label>
</Listbox.Label>

There is a potential issue though where the Listbox.Button element has aria-labelledby="headlessui-listbox-label-1 headlessui-listbox-button-2". This potentially is a bug, as I would expect only aria-labelledby="headlessui-listbox-label-1" as surely the button shouldn't be labeled by itself?

[ben-ryder]

I've checked and the same aria-labelledby behavior is also present in the headlessui playground, so if this is an issue it's not an issue with my library in particular.

I can now use my custom Label component as expected so I can close this issue now