-
Notifications
You must be signed in to change notification settings - Fork 1k
/
repro.tsx
102 lines (93 loc) · 3.07 KB
/
repro.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
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
}