fix(react): allow null controlled RadioGroup values

packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx

@@ -9,7 +9,7 @@ import {
   getRadioGroupOptions,
 } from '../../test-utils/accessibility-assertions'
 import { Keys, click, focus, press, shift } from '../../test-utils/interactions'
-import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
+import { mockingConsoleLogs, suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import { RadioGroup } from './radio-group'
 
 beforeAll(() => {
@@ -91,6 +91,38 @@ describe('Rendering', () => {
     })
   )
 
+  it(
+    'should allow a controlled RadioGroup to use null as the empty value',
+    mockingConsoleLogs(async (spy) => {
+      function Example() {
+        let [value, setValue] = useState<string | null>(null)
+
+        return (
+          <RadioGroup value={value} onChange={setValue}>
+            <RadioGroup.Label>Pizza Delivery</RadioGroup.Label>
+            <RadioGroup.Option value="pickup">Pickup</RadioGroup.Option>
+            <RadioGroup.Option value="home-delivery">Home delivery</RadioGroup.Option>
+            <RadioGroup.Option value="dine-in">Dine in</RadioGroup.Option>
+          </RadioGroup>
+        )
+      }
+
+      render(<Example />)
+
+      expect(getRadioGroupOptions()).toHaveLength(3)
+
+      assertFocusable(getByText('Pickup'))
+
+      await click(getByText('Home delivery'))
+
+      expect(spy).not.toHaveBeenCalled()
+
+      assertNotFocusable(getByText('Pickup'))
+      assertFocusable(getByText('Home delivery'))
+      assertNotFocusable(getByText('Dine in'))
+    })
+  )
+
   it(
     'should be possible to render a RadioGroup with an active value',
     suppressConsoleLogs(async () => {

packages/@headlessui-react/src/components/radio-group/radio-group.tsx

@@ -143,7 +143,7 @@ function stateReducer<T>(state: StateDefinition<T>, action: Actions) {
 
 let DEFAULT_RADIO_GROUP_TAG = 'div' as const
 type RadioGroupRenderPropArg<TType> = {
-  value: TType
+  value: TType | null
 }
 type RadioGroupPropsWeControl = 'role' | 'aria-labelledby' | 'aria-describedby'
 
@@ -155,7 +155,7 @@ export type RadioGroupProps<
   RadioGroupRenderPropArg<TType>,
   RadioGroupPropsWeControl,
   {
-    value?: TType
+    value?: TType | null
     defaultValue?: TType
     onChange?: (value: TType) => void
     by?: ByComparator<TType>
@@ -192,7 +192,11 @@ function RadioGroupFn<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG,
   let radioGroupRef = useSyncRefs(internalRadioGroupRef, ref)
 
   let defaultValue = useDefaultValue(_defaultValue)
-  let [value, onChange] = useControllable(controlledValue, controlledOnChange, defaultValue)
+  let [value, onChange] = useControllable<TType | null, TType>(
+    controlledValue,
+    controlledOnChange,
+    defaultValue ?? null
+  )
 
   let firstOption = useMemo(
     () =>
@@ -203,13 +207,15 @@ function RadioGroupFn<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG,
     [options]
   )
   let containsCheckedOption = useMemo(
-    () => options.some((option) => compare(option.propsRef.current.value as TType, value)),
+    () =>
+      value !== null &&
+      options.some((option) => compare(option.propsRef.current.value as TType, value)),
     [options, value]
   )
 
   let triggerChange = useEvent((nextValue: TType) => {
     if (disabled) return false
-    if (compare(nextValue, value)) return false
+    if (value !== null && compare(nextValue, value)) return false
     let nextOption = options.find((option) =>
       compare(option.propsRef.current.value as TType, nextValue)
     )?.propsRef.current

packages/@headlessui-react/src/hooks/use-controllable.ts

@@ -2,10 +2,10 @@ import { useRef, useState } from 'react'
 import { flushSync } from 'react-dom'
 import { useEvent } from './use-event'
 
-export function useControllable<T>(
-  controlledValue: T | undefined,
-  onChange?: (value: T) => void,
-  defaultValue?: T
+export function useControllable<TControlled, TChange extends TControlled = TControlled>(
+  controlledValue: TControlled | undefined,
+  onChange?: (value: TChange) => void,
+  defaultValue?: TControlled
 ) {
   let [internalValue, setInternalValue] = useState(defaultValue)