diff --git a/src/components/common/InputSuggestion.jsx b/src/components/common/InputSuggestion.jsx new file mode 100644 index 00000000..935a1740 --- /dev/null +++ b/src/components/common/InputSuggestion.jsx @@ -0,0 +1,78 @@ +import React, { useState } from "react"; + +const InputSuggestions = ({ + organizationList = [], + value, + onChange, + error, +}) => { + const [filteredList, setFilteredList] = useState([]); + const [showSuggestions, setShowSuggestions] = useState(false); + + const handleInputChange = (e) => { + const val = e.target.value; + onChange(val); + + const matches = organizationList.filter((org) => + org.toLowerCase().includes(val.toLowerCase()) + ); + setFilteredList(matches); + setShowSuggestions(true); + }; + + const handleSelectSuggestion = (val) => { + onChange(val); + setShowSuggestions(false); + }; + + return ( +
+ setTimeout(() => setShowSuggestions(false), 150)} + onFocus={() => { + if (value) setShowSuggestions(true); + }} + /> + {showSuggestions && filteredList.length > 0 && ( + + )} + + {error && {error}} +
+ ); +}; + +export default InputSuggestions;