diff --git a/src/components/common/SelectMultiple.jsx b/src/components/common/SelectMultiple.jsx index 945a1fb1..272f8944 100644 --- a/src/components/common/SelectMultiple.jsx +++ b/src/components/common/SelectMultiple.jsx @@ -1,21 +1,21 @@ -import React, { useState, useEffect, useRef } from 'react'; -import { useFormContext } from 'react-hook-form'; -import './MultiSelectDropdown.css'; +import React, { useState, useEffect, useRef } from "react"; +import { useFormContext } from "react-hook-form"; +import "./MultiSelectDropdown.css"; const SelectMultiple = ({ name, options = [], - label = 'Select options', - labelKey = 'name', - valueKey = 'id', - placeholder = 'Please select...', - IsLoading = false + label = "Select options", + labelKey = "name", + valueKey = "id", + placeholder = "Please select...", + IsLoading = false, }) => { const { setValue, watch } = useFormContext(); const selectedValues = watch(name) || []; const [isOpen, setIsOpen] = useState(false); - const [searchText, setSearchText] = useState(''); + const [searchText, setSearchText] = useState(""); const dropdownRef = useRef(null); useEffect(() => { @@ -24,8 +24,8 @@ const SelectMultiple = ({ setIsOpen(false); } }; - document.addEventListener('mousedown', handleClickOutside); - return () => document.removeEventListener('mousedown', handleClickOutside); + document.addEventListener("mousedown", handleClickOutside); + return () => document.removeEventListener("mousedown", handleClickOutside); }, []); const handleCheckboxChange = (value) => { @@ -44,35 +44,37 @@ const SelectMultiple = ({
-
setIsOpen((prev) => !prev)} -> - 0 - ? 'placeholder-style-selected' - : 'placeholder-style' - } - > -
- {selectedValues.length > 0 ? ( - selectedValues.map((val) => { - const found = options.find((opt) => opt[valueKey] === val); - return ( - - {found ? found[labelKey] : ''} - - ); - }) - ) : ( - {placeholder} - )} -
-
- -
- +
setIsOpen((prev) => !prev)} + > + 0 + ? "placeholder-style-selected" + : "placeholder-style" + } + > +
+ {selectedValues.length > 0 ? ( + selectedValues.map((val) => { + const found = options.find((opt) => opt[valueKey] === val); + return ( + + {found ? found[labelKey] : ""} + + ); + }) + ) : ( + {placeholder} + )} +
+
+ +
{isOpen && (
@@ -94,7 +96,9 @@ const SelectMultiple = ({ return (
{labelVal}
); - } )} + })} {!IsLoading && filteredOptions.length === 0 && ( -
- +
+
)} {IsLoading && filteredOptions.length === 0 && ( -
+
)}