tmp: add reproduction example

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 <Example />
+}
+
+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 (
+    <div>
+      <Combobox value={selectedPerson} onChange={setSelectedPerson} nullable>
+        {({ open }) => {
+          if (!open) {
+            return (
+              <Combobox.Input<'input', { id: number; name: string }>
+                onChange={(event) => setQuery(event.target.value)}
+                displayValue={(person) => (person?.name ?? '') + ' closed'}
+                onBlur={() => console.log('blur while closed')}
+              />
+            )
+          }
+
+          return (
+            <>
+              <Combobox.Input<'input', { id: number; name: string }>
+                onChange={(event) => setQuery(event.target.value)}
+                displayValue={(person) => (person?.name ?? '') + ' open'}
+                onBlur={() => console.log('blur while open')}
+              />
+              <Combobox.Options static>
+                {filteredPeople.map((person) => (
+                  <Combobox.Option key={person.id} value={person}>
+                    {({ active, selected }) => (
+                      <span>
+                        {selected && '#'}
+                        {active && '>'}
+                        {person.name}
+                      </span>
+                    )}
+                  </Combobox.Option>
+                ))}
+              </Combobox.Options>
+            </>
+          )
+        }}
+      </Combobox>
+
+      <Combobox value={selectedPerson} onChange={setSelectedPerson} nullable>
+        {({ open }) => {
+          return (
+            <>
+              <OnClose callback={() => setQuery('')} />
+              <Combobox.Input<'input', { id: number; name: string }>
+                onChange={(event) => setQuery(event.target.value)}
+                displayValue={(person) => (person?.name ?? '') + ' ' + (open ? 'open' : 'closed')}
+              />
+
+              <Combobox.Options>
+                {filteredPeople.map((person) => (
+                  <Combobox.Option key={person.id} value={person}>
+                    {({ active, selected }) => (
+                      <span>
+                        {selected && '#'}
+                        {active && '>'}
+                        {person.name}
+                      </span>
+                    )}
+                  </Combobox.Option>
+                ))}
+              </Combobox.Options>
+            </>
+          )
+        }}
+      </Combobox>
+    </div>
+  )
+}
+
+function OnClose({ callback }) {
+  useEffect(() => {
+    return () => callback()
+  })
+  return null
+}