78 lines
2.0 KiB
JavaScript
78 lines
2.0 KiB
JavaScript
import React, { useState } from "react";
|
|
|
|
const InputSuggestions = ({
|
|
organizationList = [],
|
|
value,
|
|
onChange,
|
|
error,
|
|
disabled = false,
|
|
}) => {
|
|
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 (
|
|
<div className="mb-3 position-relative">
|
|
<input
|
|
className="form-control form-control-sm"
|
|
value={value}
|
|
onChange={handleInputChange}
|
|
onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
|
|
onFocus={() => {
|
|
if (value) setShowSuggestions(true);
|
|
}}
|
|
disabled={disabled}
|
|
/>
|
|
{showSuggestions && filteredList.length > 0 && (
|
|
<ul
|
|
className="dropdown-menu w-100 shadow-sm show animate__fadeIn"
|
|
style={{
|
|
maxHeight: "180px",
|
|
overflowY: "auto",
|
|
marginTop: "2px",
|
|
zIndex: 1000,
|
|
borderRadius: "0px",
|
|
}}
|
|
>
|
|
{filteredList.map((org) => (
|
|
<li
|
|
key={org}
|
|
className="ropdown-item"
|
|
style={{
|
|
cursor: "pointer",
|
|
padding: "5px 12px",
|
|
fontSize: "14px",
|
|
transition: "background-color 0.2s",
|
|
}}
|
|
onMouseDown={() => handleSelectSuggestion(org)}
|
|
className={`dropdown-item ${
|
|
org === value ? "active" : ""
|
|
}`}
|
|
>
|
|
{org}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
)}
|
|
|
|
{error && <small className="danger-text">{error}</small>}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default InputSuggestions;
|