Make the ref optional in the Popover component

CHANGELOG.md

@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Simplify `Popover` Tab logic by using sentinel nodes instead of keydown event interception ([#1440](https://github.com/tailwindlabs/headlessui/pull/1440))
 - Ensure the `Popover.Panel` is clickable without closing the `Popover` ([#1443](https://github.com/tailwindlabs/headlessui/pull/1443))
 - Improve "Scroll lock" scrollbar width for `Dialog` component ([#1457](https://github.com/tailwindlabs/headlessui/pull/1457))
+- Make the `ref` optional in the `Popover` component ([#1465](https://github.com/tailwindlabs/headlessui/pull/1465))
 
 ## [@headlessui/react@1.6.1] - 2022-05-03
 

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

@@ -1,4 +1,4 @@
-import React, { createElement, useEffect, useRef } from 'react'
+import React, { createElement, useEffect, useRef, Fragment } from 'react'
 import { render } from '@testing-library/react'
 
 import { Popover } from './popover'
@@ -259,6 +259,38 @@ describe('Rendering', () => {
         assertActiveElement(getByText('restoreable'))
       })
     )
+
+    describe('refs', () => {
+      it(
+        'should be possible to get a ref to the Popover',
+        suppressConsoleLogs(async () => {
+          let popoverRef = { current: null }
+
+          render(
+            <Popover as="div" ref={popoverRef}>
+              <Popover.Button>Trigger</Popover.Button>
+              <Popover.Panel>Popover</Popover.Panel>
+            </Popover>
+          )
+
+          expect(popoverRef.current).not.toBeNull()
+        })
+      )
+
+      it(
+        'should be possible to use a Fragment with an optional ref',
+        suppressConsoleLogs(async () => {
+          render(
+            <Popover as={Fragment}>
+              <Popover.Button>Trigger</Popover.Button>
+              <Popover.Panel>Popover</Popover.Panel>
+            </Popover>
+          )
+
+          // It should not throw
+        })
+      )
+    })
   })
 
   describe('Popover.Button', () => {

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

@@ -22,7 +22,7 @@ import React, {
 import { Props } from '../../types'
 import { match } from '../../utils/match'
 import { forwardRefWithAs, render, Features, PropsForFeatures } from '../../utils/render'
-import { useSyncRefs } from '../../hooks/use-sync-refs'
+import { optionalRef, useSyncRefs } from '../../hooks/use-sync-refs'
 import { useId } from '../../hooks/use-id'
 import { Keys } from '../keyboard'
 import { isDisabledReactIssue7711 } from '../../utils/bugs'
@@ -185,8 +185,12 @@ let PopoverRoot = forwardRefWithAs(function Popover<
   let buttonId = `headlessui-popover-button-${useId()}`
   let panelId = `headlessui-popover-panel-${useId()}`
   let internalPopoverRef = useRef<HTMLElement | null>(null)
-  let popoverRef = useSyncRefs(ref, internalPopoverRef)
-  let ownerDocument = useOwnerDocument(internalPopoverRef)
+  let popoverRef = useSyncRefs(
+    ref,
+    optionalRef((ref) => {
+      internalPopoverRef.current = ref
+    })
+  )
 
   let reducerBag = useReducer(stateReducer, {
     popoverState: PopoverStates.Closed,
@@ -200,6 +204,8 @@ let PopoverRoot = forwardRefWithAs(function Popover<
   let [{ popoverState, button, panel, beforePanelSentinel, afterPanelSentinel }, dispatch] =
     reducerBag
 
+  let ownerDocument = useOwnerDocument(internalPopoverRef.current ?? button)
+
   useEffect(() => dispatch({ type: ActionTypes.SetButtonId, buttonId }), [buttonId, dispatch])
   useEffect(() => dispatch({ type: ActionTypes.SetPanelId, panelId }), [panelId, dispatch])