diff --git a/packages/strapi-plugin-users-permissions/admin/src/components/InputSearchContainer/index.js b/packages/strapi-plugin-users-permissions/admin/src/components/InputSearchContainer/index.js index b1a4a386ac..6a76401e4f 100644 --- a/packages/strapi-plugin-users-permissions/admin/src/components/InputSearchContainer/index.js +++ b/packages/strapi-plugin-users-permissions/admin/src/components/InputSearchContainer/index.js @@ -15,7 +15,8 @@ import InputSearchLi from '../InputSearchLi'; import { Addon, List, Wrapper } from './Components'; function InputSearchContainer({ - didDeleteUser, + didFetchUsers, + getUser, label, name, onClickAdd, @@ -23,27 +24,50 @@ function InputSearchContainer({ values, }) { const searchInput = useRef(null); - console.log(values); - const [filteredUsers, setFilteredUsers] = useState(values); const [isAdding, setIsAdding] = useState(false); const [isFocused, setIsFocused] = useState(false); const [errors, setErrors] = useState([]); + const [users, setUsers] = useState(values); const [value, setValue] = useState(''); useEffect(() => { if (values !== filteredUsers) { + setUsers(values); setFilteredUsers(values); } }, [values]); + useEffect(() => { + if (users !== filteredUsers) { + setFilteredUsers(users); + setIsAdding(true); + } + }, [didFetchUsers]); + const handleBlur = () => setIsFocused(prev => !prev); - const handleChange = () => {}; + const handleChange = ({ target: value }) => { + const filteredUsers = isEmpty(value) + ? users + : users.filter(user => includes(toLower(user.name), toLower(value))); + + if (isEmpty(filteredUsers) && !isEmpty(value)) { + getUser(value); + } + + if (isEmpty(value)) { + setValue(value); + setFilteredUsers(values); + setIsAdding(false); + setUsers(values); + } + + setValue(value); + setFilteredUsers(filteredUsers); + }; const handleClick = item => { - console.log(item); - console.log(isAdding); if (isAdding) { const id = has(item, '_id') ? '_id' : 'id'; const users = values; @@ -115,7 +139,6 @@ InputSearchContainer.defaultProps = { }; InputSearchContainer.propTypes = { - didDeleteUser: PropTypes.bool.isRequired, didFetchUsers: PropTypes.bool.isRequired, didGetUsers: PropTypes.bool.isRequired, getUser: PropTypes.func.isRequired,