diff --git a/src/features/congregation/field_service_groups/group_members/index.tsx b/src/features/congregation/field_service_groups/group_members/index.tsx index f7990c756e..ca564b3219 100644 --- a/src/features/congregation/field_service_groups/group_members/index.tsx +++ b/src/features/congregation/field_service_groups/group_members/index.tsx @@ -16,6 +16,8 @@ const GroupMembers = (props: GroupMembersProps) => { members, handleDragChange, handleRemove, + handleInputChange, + inputValue, } = useGroupMembers(props); return ( @@ -47,7 +49,8 @@ const GroupMembers = (props: GroupMembersProps) => { option.person_uid === value?.person_uid } value={null} - inputValue={''} + inputValue={inputValue} + onInputChange={(_, value) => handleInputChange(value)} onChange={(e, value: UsersOption) => handleAddPublisher(value)} renderOption={(props, option) => ( { const groups = useRecoilValue(fieldGroupsState); const [members, setMembers] = useState([]); + const [inputValue, setInputValue] = useState(''); const other_groups_members = useMemo(() => { const otherGroups = groups.filter( @@ -80,7 +81,11 @@ const useGroupMembers = ({ group, onChange }: GroupMembersProps) => { return lastIndex; }; + const handleInputChange = (value: string) => setInputValue(value); + const handleAddPublisher = (value: UsersOption) => { + setInputValue(''); + const newGroup = structuredClone(group); const index = getIndex(); @@ -173,6 +178,8 @@ const useGroupMembers = ({ group, onChange }: GroupMembersProps) => { members, handleDragChange, handleRemove, + handleInputChange, + inputValue, }; };