diff --git a/src/custom/InputSearchField/InputSearchField.tsx b/src/custom/InputSearchField/InputSearchField.tsx index 7cefc0149..1557e753c 100644 --- a/src/custom/InputSearchField/InputSearchField.tsx +++ b/src/custom/InputSearchField/InputSearchField.tsx @@ -9,7 +9,7 @@ interface Option { name: string; } -interface InputFieldSearchProps { +interface InputSearchFieldProps { data: Option[]; setFilterData: (data: Option[]) => void; label?: string; @@ -22,7 +22,7 @@ interface InputFieldSearchProps { setSearchValue: (value: string) => void; } -const InputFieldSearch: React.FC = ({ +const InputSearchField: React.FC = ({ data, label, fetchSuggestions, @@ -194,12 +194,7 @@ const InputFieldSearch: React.FC = ({ setShowAllItems(!showAllItems)} sx={{ - cursor: 'pointer', - color: 'primary.main', - fontWeight: '600', - '&:hover': { - color: 'primary.dark' - } + cursor: 'pointer' }} > {showAllItems ? '(hide)' : `(+${localSelectedData?.length - 1})`} @@ -210,4 +205,4 @@ const InputFieldSearch: React.FC = ({ ); }; -export default InputFieldSearch; +export default InputSearchField; diff --git a/src/custom/UserSearchField/UserSearchFieldInput.tsx b/src/custom/UserSearchField/UserSearchFieldInput.tsx index d562d3a8e..c2f79b076 100644 --- a/src/custom/UserSearchField/UserSearchFieldInput.tsx +++ b/src/custom/UserSearchField/UserSearchFieldInput.tsx @@ -73,7 +73,6 @@ const UserSearchField: React.FC = ({ setLocalUsersData(usersData || []); }, [usersData]); - // Combine current user with search results and filter appropriately const displayOptions = useMemo(() => { if (hasInitialFocus && !usersSearch && currentUserData) { return [currentUserData]; @@ -159,23 +158,23 @@ const UserSearchField: React.FC = ({ id="user-search-field" style={{ width: '100%' }} open={open} + options={displayOptions} + getOptionLabel={() => inputValue} + isOptionEqualToValue={(option, value) => option.id === value.id} onOpen={() => setOpen(true)} onClose={() => setOpen(false)} inputValue={inputValue} onChange={handleAdd} onInputChange={handleInputChange} - options={displayOptions} - getOptionLabel={() => inputValue} - isOptionEqualToValue={(option, value) => option.id === value.id} // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore filterOptions={(options, { inputValue }) => { return options.filter((option: User) => { const searchStr = inputValue.toLowerCase(); return ( - option.first_name.toLowerCase().includes(searchStr) || - option.last_name.toLowerCase().includes(searchStr) || - option.email.toLowerCase().includes(searchStr) + option.first_name?.toLowerCase().includes(searchStr) || + option.last_name?.toLowerCase().includes(searchStr) || + option.email?.toLowerCase().includes(searchStr) ); }); }} @@ -187,6 +186,7 @@ const UserSearchField: React.FC = ({ blurOnSelect={true} clearOnBlur={true} popupIcon={null} + forcePopupIcon={false} noOptionsText={isUserSearchLoading ? 'Loading...' : 'No users found'} renderInput={(params) => ( = ({ endAdornment: ( {isUserSearchLoading ? : null} - {params.InputProps.endAdornment} ) }} @@ -307,12 +306,7 @@ const UserSearchField: React.FC = ({ setShowAllUsers(!showAllUsers)} sx={{ - cursor: 'pointer', - color: 'white', - fontWeight: '600', - '&:hover': { - color: 'black' - } + cursor: 'pointer' }} > {showAllUsers ? '(hide)' : `(+${localUsersData.length - 1})`}