diff --git a/packages/playground-react/pages/combobox/repro.tsx b/packages/playground-react/pages/combobox/repro.tsx
new file mode 100644
index 0000000000..af2951faf2
--- /dev/null
+++ b/packages/playground-react/pages/combobox/repro.tsx
@@ -0,0 +1,102 @@
+import React, { useState, useEffect } from 'react'
+import { Combobox } from '@headlessui/react'
+
+export default function App() {
+ return
+}
+
+const people = [
+ { id: 1, name: 'Durward Reynolds' },
+ { id: 2, name: 'Kenton Towne' },
+ { id: 3, name: 'Therese Wunsch' },
+ { id: 4, name: 'Benedict Kessler' },
+ { id: 5, name: 'Katelyn Rohan' },
+]
+
+function Example() {
+ const [selectedPerson, setSelectedPerson] = useState(null)
+ const [query, setQuery] = useState('')
+
+ const filteredPeople =
+ query === ''
+ ? people
+ : people.filter((person) => {
+ return person.name.toLowerCase().includes(query.toLowerCase())
+ })
+
+ return (
+
+
+ {({ open }) => {
+ if (!open) {
+ return (
+
+ onChange={(event) => setQuery(event.target.value)}
+ displayValue={(person) => (person?.name ?? '') + ' closed'}
+ onBlur={() => console.log('blur while closed')}
+ />
+ )
+ }
+
+ return (
+ <>
+
+ onChange={(event) => setQuery(event.target.value)}
+ displayValue={(person) => (person?.name ?? '') + ' open'}
+ onBlur={() => console.log('blur while open')}
+ />
+
+ {filteredPeople.map((person) => (
+
+ {({ active, selected }) => (
+
+ {selected && '#'}
+ {active && '>'}
+ {person.name}
+
+ )}
+
+ ))}
+
+ >
+ )
+ }}
+
+
+
+ {({ open }) => {
+ return (
+ <>
+ setQuery('')} />
+
+ onChange={(event) => setQuery(event.target.value)}
+ displayValue={(person) => (person?.name ?? '') + ' ' + (open ? 'open' : 'closed')}
+ />
+
+
+ {filteredPeople.map((person) => (
+
+ {({ active, selected }) => (
+
+ {selected && '#'}
+ {active && '>'}
+ {person.name}
+
+ )}
+
+ ))}
+
+ >
+ )
+ }}
+
+
+ )
+}
+
+function OnClose({ callback }) {
+ useEffect(() => {
+ return () => callback()
+ })
+ return null
+}