diff --git a/src/components/accounts/ui/input/AccountsInput.js b/src/components/accounts/ui/input/AccountsInput.js index a5dcf1139..bba495113 100644 --- a/src/components/accounts/ui/input/AccountsInput.js +++ b/src/components/accounts/ui/input/AccountsInput.js @@ -1,21 +1,25 @@ import { TextField } from '@mui/material'; import { grey } from '@mui/material/colors'; -import React from 'react'; +import React, { useDeferredValue, useState, useEffect } from 'react'; import SearchIcon from '@mui/icons-material/Search'; import HighlightOffIcon from '@mui/icons-material/HighlightOff'; -export const AccountsInput = ({ - search, - setsearch, - placeholder, - width = 200, -}) => { +export const AccountsInput = ({ setsearch, placeholder, width = 200 }) => { + const [internalSearch, setInternalSearch] = useState(''); + const deferredSearch = useDeferredValue(internalSearch); + const handleChange = (e) => { - setsearch(e.target.value); + setInternalSearch(e.target.value); }; + const clearInput = () => { - setsearch(''); + setInternalSearch(''); }; + + useEffect(() => { + setsearch(deferredSearch); + }, [deferredSearch, setsearch]); + return ( ({ @@ -28,11 +32,11 @@ export const AccountsInput = ({ })} size="small" placeholder={placeholder} - value={search} + value={internalSearch} onChange={(e) => handleChange(e)} InputProps={{ startAdornment: , - endAdornment: search && ( + endAdornment: internalSearch && ( { - const name = `${e?.firstName?.toLowerCase() || '-'} ${ - e?.lastName?.toLowerCase() || '-' - }`; - return name?.includes(search?.toLowerCase()); + const filteredUsers = instanceUserWithRoles?.filter((user) => { + const formattedSearchKeyword = search?.toLowerCase()?.trim(); + const userFullName = `${user?.firstName || '-'} ${user?.lastName || '-'}`; + + return ( + userFullName?.toLowerCase()?.includes(formattedSearchKeyword) || + user?.email?.toLowerCase()?.includes(formattedSearchKeyword) + ); }); + const userProps = { updateRole, roles: filteredUsers, diff --git a/src/views/accounts/instances/Apis.js b/src/views/accounts/instances/Apis.js index e479a0f33..3112fb0cd 100644 --- a/src/views/accounts/instances/Apis.js +++ b/src/views/accounts/instances/Apis.js @@ -463,7 +463,6 @@ export const Apis = ({ // arrToSubmit, // setarrToSubmit, // updateSetting, - search, setsearch, }) => { const handleCreateTokenModal = () => { @@ -494,11 +493,7 @@ export const Apis = ({ return ( - + {isInstanceOwner && (