I am building a react component where I want a input field with the dropdown , when I type in field a dropdown open and each option have checkbox in front of it and when a user check the checkbox , it value is stored in input filed along with close icon.It also have select All option which will be shown intermediate sign when fewer is selected and checked when all are selected.I want this functionality to work properly as I am facing several problem.I am building this component to work with formik form and dropdown open on select on form
Here is my Code.
import React, { useState, useEffect, useRef, ReactNode } from 'react'
import { FieldFeedbackLabel } from '../../../../_metronic/partials/controls';
interface MultiSelectComponentProps {
name: string;
label: string;
required: boolean;
type: string
id: string;
field: {
name: string;
value: any;
onChange: (event: any) => void;
onBlur: (event: any) => void;
};
form: {
touched: { [name: string]: boolean };
errors: { [name: string]: string };
setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void;
};
allowMultiSelect: boolean;
withFeedbackLabel?: boolean;
customFeedbackLabel?: string;
options: string[];
onChange: (selectedOptions: string[]) => void;
}
const getFieldCSSClasses = (touched: boolean, errors: string): string => {
const classes = ["form-control form-control-lg form-control-solid mb-3"];
if (touched && errors) {
classes.push("is-invalid");
}
if (touched && !errors) {
classes.push("is-valid");
}
return classes.join(" ");
};
export default function MultiSelectDropdown({ name,
label,
required,
id,
field,
type = 'select',
form: { touched, errors, setFieldValue },
withFeedbackLabel = true,
customFeedbackLabel,
options,
onChange,
allowMultiSelect = true,
...props
}: MultiSelectComponentProps) {
const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
const [searchTerm, setSearchTerm] = useState<string>('');
const [filteredOptions, setFilteredOptions] = useState<string[]>(options);
const [selectAll, setSelectAll] = useState(false);
const divRef = useRef<HTMLDivElement | null>(null);
const indetSetter = React.useCallback((el: any) => {
if (el && selectedOptions.length && !selectAll) {
el.indeterminate = true;
el.checked = false
}else if(el &&(selectAll||selectedOptions.length ===filteredOptions.length)){
el.indeterminate = false;
el.checked = true
}
}, [selectedOptions,selectAll,filteredOptions.length]);
const toggleOption = (option: string) => {
const isSelected = selectedOptions.includes(option);
if (isSelected) {
setSelectedOptions(selectedOptions.filter((item) => item !== option));
} else {
if (allowMultiSelect) {
setSelectedOptions([...selectedOptions, option]);
} else {
setSelectedOptions([option]);
}
}
setSelectAll(false)
};
const handleSelectAllChange = () => {
if (selectAll) {
setSelectedOptions([]);
} else {
setSelectedOptions([...filteredOptions]);
}
setSelectAll(!selectAll);
};
const renderSelectedOptions = () => {
if (selectedOptions.length === 0) {
return null;
}
return (
<div className="selected-option">
{selectedOptions.map((option) => (
<span key={option} className="selected-option">
{option}
<span
className="remove-option"
onClick={() => toggleOption(option)}
>
✕
</span>
</span>
))}
</div>
);
};
const handleSearchChange = () => {
const searchText = divRef.current?.textContent
if (searchText) {
setSearchTerm(searchText);
} else {
setSearchTerm('')
}
};
useEffect(() => {
const filtered = options.filter((option) =>
option.toLowerCase().includes(searchTerm.toLowerCase())
);
setFilteredOptions(filtered);
}, [searchTerm, options]);
useEffect(() => {
setFieldValue(field.name, selectedOptions)
}, [selectedOptions])
return (
<>
<div className="multi-select-dropdown">
{label && <label className="fw-bold fs-6">Select {label}</label>}
{required && <span style={{ color: "red" }}>*</span>}
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
<div
className="editable-div form-control form-control-lg form-control-solid mb-3"
contentEditable="true"
ref={divRef}
onInput={handleSearchChange}
>
<div className="selected-options"
contentEditable="false"
>{renderSelectedOptions()}</div>
</div>
<input
type='hidden'
name={field.name}
className={getFieldCSSClasses(touched[field.name], errors[field.name])}
value={selectedOptions}
/>
{searchTerm && (
<>
<div className="dropdown-options dropdown-content">
{allowMultiSelect && (<>
<div className="dropdown-header">
<input
type="checkbox"
ref={indetSetter}
checked={selectAll||selectedOptions.length===filteredOptions.length}
onChange={handleSelectAllChange}
/><span>Select All</span>
</div>
</>)}
{filteredOptions.map((option) => (
<div key={option} className="option">
<input
type="checkbox"
value={option}
checked={selectedOptions.includes(option)}
onChange={() => toggleOption(option)}
/>
<span className='dropdown-option-value'>{option}</span>
</div>
))}
</div>
</>
)}
</div>
{withFeedbackLabel && (
<FieldFeedbackLabel
error={errors[field.name]}
touched={touched[field.name]}
label={label}
type={type}
customFeedbackLabel={customFeedbackLabel}
/>
)}
</>
)
}
I tried different react packages like react-select and multiselect-react-dropdown and other but It doesn’t fullfill all the requirement like Showing it intermidate selected checkbox
