Omit nullable prop from Combobox component (#3100)

* ensure we pluck out the `nullable` prop from the props

This should help improve migrating to v2 because otherwise the
`nullable` prop (that doesn't do anything) could end up on the
`Fragment` and cause errors.

* update changelog

* add test to ensure `<Combobox nullable />` doesn't crash

packages/@headlessui-react/CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix enter transitions for the `Transition` component ([#3074](https://github.com/tailwindlabs/headlessui/pull/3074))
 - Render hidden form input fields for `Checkbox`, `Switch` and `RadioGroup` components ([#3095](https://github.com/tailwindlabs/headlessui/pull/3095))
 - Ensure the `multiple` prop is typed correctly when passing explicit types to the `Combobox` component ([#3099](https://github.com/tailwindlabs/headlessui/pull/3099))
+- Omit `nullable` prop from `Combobox` component ([#3100](https://github.com/tailwindlabs/headlessui/pull/3100))
 
 ### Changed
 

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

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react'
-import React, { createElement, useEffect, useState } from 'react'
+import React, { Fragment, createElement, useEffect, useState } from 'react'
 import {
   ComboboxMode,
   ComboboxState,
@@ -575,6 +575,31 @@ describe('Rendering', () => {
         assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
       })
     )
+
+    it(
+      'should not crash when the `Combobox` still contains a `nullable` prop',
+      suppressConsoleLogs(async () => {
+        let data = [
+          { id: 1, name: 'alice', label: 'Alice' },
+          { id: 2, name: 'bob', label: 'Bob' },
+          { id: 3, name: 'charlie', label: 'Charlie' },
+        ]
+
+        render(
+          <Combobox nullable as={Fragment}>
+            <Combobox.Input onChange={NOOP} />
+            <Combobox.Button />
+            <Combobox.Options>
+              {data.map((person) => (
+                <Combobox.Option key={person.id} value={person}>
+                  {person.label}
+                </Combobox.Option>
+              ))}
+            </Combobox.Options>
+          </Combobox>
+        )
+      })
+    )
   })
 
   describe('Combobox.Input', () => {

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

@@ -608,6 +608,9 @@ function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_T
     multiple = false,
     immediate = false,
     virtual = null,
+    // Deprecated, but let's pluck it from the props such that it doesn't end up
+    // on the `Fragment`
+    nullable: _nullable,
     ...theirProps
   } = props
   let [value = multiple ? [] : undefined, theirOnChange] = useControllable<any>(