From 3161b0df902c8bc3bb53f1f1c0707cae8f25a8a1 Mon Sep 17 00:00:00 2001
From: Olivier Louvignes <olivier@mgcrea.io>
Date: Wed, 16 Nov 2022 18:02:34 +0100
Subject: [PATCH] Allow custom `id` attribute to `<Listbox.Button />`

---
 .../src/components/listbox/listbox.test.tsx            | 10 ++++++++++
 .../src/components/listbox/listbox.tsx                 |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/@headlessui-react/src/components/listbox/listbox.test.tsx b/packages/@headlessui-react/src/components/listbox/listbox.test.tsx
index 84f415d3c9..6180ae3ff1 100644
--- a/packages/@headlessui-react/src/components/listbox/listbox.test.tsx
+++ b/packages/@headlessui-react/src/components/listbox/listbox.test.tsx
@@ -658,6 +658,16 @@ describe('Rendering', () => {
 
         expect(getListboxButton()).not.toHaveAttribute('type')
       })
+
+      it('should support a custom `id` attribute', async () => {
+        render(
+          <Listbox value={null} onChange={console.log}>
+            <Listbox.Button id="my-custom-id">Trigger</Listbox.Button>
+          </Listbox>
+        )
+
+        expect(getListboxButton()).toHaveAttribute('id', 'my-custom-id')
+      })
     })
   })
 
diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx
index e7c52bc5a9..15b3e1095a 100644
--- a/packages/@headlessui-react/src/components/listbox/listbox.tsx
+++ b/packages/@headlessui-react/src/components/listbox/listbox.tsx
@@ -592,7 +592,7 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
   let actions = useActions('Listbox.Button')
   let buttonRef = useSyncRefs(data.buttonRef, ref)
 
-  let id = `headlessui-listbox-button-${useId()}`
+  let id = props.id ?? `headlessui-listbox-button-${useId()}`
   let d = useDisposables()
 
   let handleKeyDown = useEvent((event: ReactKeyboardEvent<HTMLButtonElement>) => {