So it’s a known bug of react-select AsyncPaginate where the dropdown closes as soon as you select an option in a multi-option dropdown. Which shouldn’t be the case.
Basically ‘closeMenuOnSelect’ doesn’t work as intended if we use Creatable react-select.
So I am left with no option but to have a workaround using useRef. Intention is to close the dropdown menu if the user clicks outside the dropdown menu. However, I do not know how to hook the ref with the dropdown menu, since I can’t access it’s div.
export const AsyncSelectField = ({props}) => {
const [menuOpen, setMenuOpen] = useState(false);
const dropDownRef = useRef(null);
const handleMenuClose = () => {
if (isMulti) {
// If isMulti is true, reopen the menu
setMenuOpen(true);
} else {
// Otherwise, just close the menu
setMenuOpen(false);
}
};
useEffect(() => {
const handleClickOutside = (event) => {
if (dropDownRef.current && !dropDownRef.current.contains(event.target)) {
setMenuOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [menuOpen]);
}
const Option = (props) => {
return (
<components.Option {...props}>
<RenderOption {...props} />
</components.Option>
);
};
// single select
const SingleValue = (props) => {
return (
<components.SingleValue {...props}>
<RenderSingleValue {...props} />
</components.SingleValue>
);
};
const CreatableAsyncPaginate = withAsyncPaginate(Creatable);
const AsyncPaginateField = useMemo(
() => (isCreateable ? CreatableAsyncPaginate : AsyncPaginate),
[CreatableAsyncPaginate, isCreateable],
);
return (
<AsyncSelectFieldStyled ref={dropDownRef} className={className} disabled={disabled}>
{label && (
<div className="label" data-testid="label">
<Typography color="#2B3952">{label}</Typography>
{optional && <div className="optionalField">(Optional)</div>}
{description && (
<div data-testid="description" className="info-icon">
<Description description={description} />
</div>
)}
</div>
)}
<AsyncPaginateField
key={id}
id={id}
className="async-paginated-select"
classNamePrefix="react-select"
value={value}
isMulti={isMulti}
closeMenuOnSelect={!isMulti}
menuIsOpen={menuOpen}
onMenuClose={handleMenuClose}
onMenuOpen={() => setMenuOpen(true)}
hideSelectedOptions={hideSelectedOptions}
options={options}
loadOptions={loadOptions}
loadOptionsOnMenuOpen={false}
onChange={(newValue) => onChange(newValue)}
placeholder={placeholder}
getOptionValue={(option) => option.value}
backspaceRemovesValue={backspaceRemovesValue}
getOptionLabel={(option) => option.label}
isClearable={isClearable}
isOptionDisabled={isOptionDisabled}
components={{
Option,
SingleValue,
IndicatorSeparator: () => <span />,
DropdownIndicator: () =>
isLoading ? (
<Box className="loading-bar-wrapper">
<Loader isCircular size={15} />
</Box>
) : (
showDropdownIcon && <div className="caret-icon">{<ArrowDropDownIcon />}</div>
),
...(!showMenuList && { MenuList: () => null }),
}}
What can I do to make this work? How can I assign the ref to the dropdown menu?
