In my React component I have a sidebar menu, CustomizeComponentSidebar
that in turn contains several other custom html tags. One of them is MUI’s Multiple Select. I made a close-on-click-outside functionality for using useRef
. Everything is fine except if I click on MUI’s Multiple Select field, it traces the click as outside the component and closes it. I also tried using MUI’s ClickAwayListener instead, with the same result. Any help appreciated
const handleClickOutside = (event) =>
ref.current && !ref.current.contains(event.target) && resetSidebar();
useEffect(
() => {
document.addEventListener("click", handleClickOutside, true);
return () => document
.removeEventListener("click", handleClickOutside, true);
},
[customizeComponentMenu.open]
);
……..
<div ref={ ref } className="position-absolute">
<CustomizeComponentSidebar
props={ props }
/>
</div>
///SelectField looks like this
return (
<div>
<FormControl sx={ { m: 1, width: 300 } }>
<InputLabel id="demo-multiple-name-label">Select</InputLabel>
<Select
labelId="demo-multiple-name-label"
id="demo-multiple-name"
multiple={ props.configuration.multipleOptions }
value={ getValue() }
onChange={ handleChange }
input={ <OutlinedInput label="Option" /> }
MenuProps={ MenuProps }
>
{ options.map((option) =>
(
<MenuItem
key={ option }
value={ option }
style={ getStyles(option, optionName, theme) }
>
{ option }
</MenuItem>
))
}
</Select>
</FormControl>
</div>
);
};
export default SelectField;