@@ -6,11 +6,11 @@ import { useMachine } from "@xstate/react"
6
6
import { User } from "api/typesGenerated"
7
7
import { AvatarData } from "components/AvatarData/AvatarData"
8
8
import debounce from "just-debounce-it"
9
- import { ChangeEvent , useState } from "react"
9
+ import { ChangeEvent , useEffect , useState } from "react"
10
10
import { searchUserMachine } from "xServices/users/searchUserXService"
11
11
12
12
export type UserAutocompleteProps = {
13
- value : User | null
13
+ value ? : User | null
14
14
onChange : ( user : User | null ) => void
15
15
}
16
16
@@ -19,24 +19,38 @@ export const UserAutocomplete: React.FC<UserAutocompleteProps> = ({ value, onCha
19
19
const [ isAutocompleteOpen , setIsAutocompleteOpen ] = useState ( false )
20
20
const [ searchState , sendSearch ] = useMachine ( searchUserMachine )
21
21
const { searchResults } = searchState . context
22
+ const [ selectedValue , setSelectedValue ] = useState < User | null > ( value || null )
23
+
24
+ // seed list of options on the first page load if a user pases in a value
25
+ // since some organizations have long lists of users, we do not load all options on page load.
26
+ useEffect ( ( ) => {
27
+ if ( value ) {
28
+ sendSearch ( "SEARCH" , { query : value . email } )
29
+ }
30
+ // eslint-disable-next-line react-hooks/exhaustive-deps
31
+ } , [ ] )
22
32
23
33
const handleFilterChange = debounce ( ( event : ChangeEvent < HTMLInputElement > ) => {
24
34
sendSearch ( "SEARCH" , { query : event . target . value } )
25
35
} , 1000 )
26
36
27
37
return (
28
38
< Autocomplete
29
- value = { value }
39
+ value = { selectedValue }
30
40
id = "user-autocomplete"
31
- style = { { width : 300 } }
32
41
open = { isAutocompleteOpen }
33
42
onOpen = { ( ) => {
34
43
setIsAutocompleteOpen ( true )
35
44
} }
36
45
onClose = { ( ) => {
37
46
setIsAutocompleteOpen ( false )
38
47
} }
39
- onChange = { ( event , newValue ) => {
48
+ onChange = { ( _ , newValue ) => {
49
+ if ( newValue === null ) {
50
+ sendSearch ( "CLEAR_RESULTS" )
51
+ }
52
+
53
+ setSelectedValue ( newValue )
40
54
onChange ( newValue )
41
55
} }
42
56
getOptionSelected = { ( option : User , value : User ) => option . username === value . username }
@@ -84,10 +98,16 @@ export const UserAutocomplete: React.FC<UserAutocompleteProps> = ({ value, onCha
84
98
export const useStyles = makeStyles ( ( theme ) => {
85
99
return {
86
100
autocomplete : {
101
+ width : "100%" ,
102
+
103
+ "& .MuiFormControl-root" : {
104
+ width : "100%" ,
105
+ } ,
106
+
87
107
"& .MuiInputBase-root" : {
88
- width : 300 ,
108
+ width : "100%" ,
89
109
// Match button small height
90
- height : 36 ,
110
+ height : 40 ,
91
111
} ,
92
112
93
113
"& input" : {
0 commit comments