diff --git a/src/components/Expenses/ManageExpense.jsx b/src/components/Expenses/ManageExpense.jsx index fa19d2c5..9644bb3a 100644 --- a/src/components/Expenses/ManageExpense.jsx +++ b/src/components/Expenses/ManageExpense.jsx @@ -330,6 +330,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => { control={control} name="paidById" projectId={null} + forAll={expenseToEdit ? true :false} /> diff --git a/src/components/common/EmployeeSearchInput.jsx b/src/components/common/EmployeeSearchInput.jsx index c4cdda09..34fdecaa 100644 --- a/src/components/common/EmployeeSearchInput.jsx +++ b/src/components/common/EmployeeSearchInput.jsx @@ -1,11 +1,16 @@ -import { useState, useEffect, useRef } from "react"; +import { useState, useEffect } from "react"; import { useEmployeesName } from "../../hooks/useEmployees"; import { useDebounce } from "../../utils/appUtils"; import { useController } from "react-hook-form"; import Avatar from "./Avatar"; - -const EmployeeSearchInput = ({ control, name, projectId, placeholder }) => { +const EmployeeSearchInput = ({ + control, + name, + projectId, + placeholder, + forAll, +}) => { const { field: { onChange, value, ref }, fieldState: { error }, @@ -15,32 +20,20 @@ const EmployeeSearchInput = ({ control, name, projectId, placeholder }) => { const [showDropdown, setShowDropdown] = useState(false); const debouncedSearch = useDebounce(search, 500); - const wrapperRef = useRef(null); - - const { - data: employees, - isLoading, - } = useEmployeesName(projectId, debouncedSearch); + const { data: employees, isLoading } = useEmployeesName( + projectId, + debouncedSearch, + forAll + ); useEffect(() => { - if (value && !search) { - const found = employees?.data?.find((emp) => emp.id === value); - if (found) setSearch(found.firstName + " " + found.lastName); - } - }, [value, employees]); - - useEffect(() => { - const handleClickOutside = (e) => { - if (wrapperRef.current && !wrapperRef.current.contains(e.target)) { - setShowDropdown(false); + if (value && employees?.data) { + const found = employees.data.find((emp) => emp.id === value); + if (found && forAll) { + setSearch(found.firstName + " " + found.lastName); } - }; - document.addEventListener("mousedown", handleClickOutside); - - return () => { - document.removeEventListener("mousedown", handleClickOutside); - }; - }, []); + } + }, [value, employees?.data]); const handleSelect = (employee) => { onChange(employee.id); @@ -49,11 +42,11 @@ const EmployeeSearchInput = ({ control, name, projectId, placeholder }) => { }; return ( -