From f0dd25fbabda845115030ecd2c98f143edc81745 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 10 Nov 2022 15:21:24 +0100
Subject: [PATCH] Add warning when using `<Popover.Button />` multiple times
 (#2007)

* add warning when using `<Popover.Button />` multiple times

* update changelog
---
 packages/@headlessui-react/CHANGELOG.md       |  1 +
 .../src/components/popover/popover.tsx        | 23 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 5180969a76..274dd22d0f 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Reset form-like components when the parent `<form>` resets ([#2004](https://github.com/tailwindlabs/headlessui/pull/2004))
+- Add warning when using `<Popover.Button />` multiple times ([#2007](https://github.com/tailwindlabs/headlessui/pull/2007))
 
 ## [1.7.4] - 2022-11-03
 
diff --git a/packages/@headlessui-react/src/components/popover/popover.tsx b/packages/@headlessui-react/src/components/popover/popover.tsx
index 2161ece040..e011007c46 100644
--- a/packages/@headlessui-react/src/components/popover/popover.tsx
+++ b/packages/@headlessui-react/src/components/popover/popover.tsx
@@ -55,6 +55,8 @@ enum PopoverStates {
 interface StateDefinition {
   popoverState: PopoverStates
 
+  buttons: HTMLElement[]
+
   button: HTMLElement | null
   buttonId: string
   panel: HTMLElement | null
@@ -201,6 +203,7 @@ let PopoverRoot = forwardRefWithAs(function Popover<
 
   let reducerBag = useReducer(stateReducer, {
     popoverState: PopoverStates.Closed,
+    buttons: [],
     button: null,
     buttonId,
     panel: null,
@@ -387,10 +390,28 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
   let panelContext = usePopoverPanelContext()
   let isWithinPanel = panelContext === null ? false : panelContext === state.panelId
 
+  let id = useId()
   let buttonRef = useSyncRefs(
     internalButtonRef,
     ref,
-    isWithinPanel ? null : (button) => button && dispatch({ type: ActionTypes.SetButton, button })
+    isWithinPanel
+      ? null
+      : (button) => {
+          if (button) {
+            state.buttons.push(id)
+          } else {
+            let idx = state.buttons.indexOf(id)
+            if (idx !== -1) state.buttons.splice(idx, 1)
+          }
+
+          if (state.buttons.length > 1) {
+            console.warn(
+              'You are already using a <Popover.Button /> but only 1 <Popover.Button /> is supported.'
+            )
+          }
+
+          button && dispatch({ type: ActionTypes.SetButton, button })
+        }
   )
   let withinPanelButtonRef = useSyncRefs(internalButtonRef, ref)
   let ownerDocument = useOwnerDocument(internalButtonRef)