Fix <Popover.Button as={Fragment} /> crash (#1889)

* prevent infinite loop

When you use `as={Fragment}` an unmount and remount can happen. This
means that the `ref` gets called with `null` for the unmount and
`HTMLButtonElement` for the mount.

This keeps toggling which results in an infinite loop and eventually a
Maximum callback size exceeded issue.

This ensures that we only set the button if we have a button.

* update changelog

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Fix `<Popover.Button as={Fragment} />` crash ([#1889](https://github.com/tailwindlabs/headlessui/pull/1889))
 
 ## [1.7.3] - 2022-09-30
 

packages/@headlessui-react/src/components/popover/popover.test.tsx

@@ -337,6 +337,33 @@ describe('Rendering', () => {
   })
 
   describe('Popover.Button', () => {
+    it(
+      'should be possible to render a Popover.Button using a fragment',
+      suppressConsoleLogs(async () => {
+        render(
+          <Popover>
+            <Popover.Button as={Fragment}>
+              <button>Trigger</button>
+            </Popover.Button>
+            <Popover.Panel></Popover.Panel>
+          </Popover>
+        )
+
+        assertPopoverButton({
+          state: PopoverState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-popover-button-1' },
+        })
+        assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
+
+        await click(getPopoverButton())
+
+        assertPopoverButton({
+          state: PopoverState.Visible,
+          attributes: { id: 'headlessui-popover-button-1' },
+        })
+        assertPopoverPanel({ state: PopoverState.Visible })
+      })
+    )
     it(
       'should be possible to render a Popover.Button using a render prop',
       suppressConsoleLogs(async () => {

packages/@headlessui-react/src/components/popover/popover.tsx

@@ -390,7 +390,7 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
   let buttonRef = useSyncRefs(
     internalButtonRef,
     ref,
-    isWithinPanel ? null : (button) => dispatch({ type: ActionTypes.SetButton, button })
+    isWithinPanel ? null : (button) => button && dispatch({ type: ActionTypes.SetButton, button })
   )
   let withinPanelButtonRef = useSyncRefs(internalButtonRef, ref)
   let ownerDocument = useOwnerDocument(internalButtonRef)