I'm currently utilizing React Hooks in my project. I am attempting to trigger an onclick event using the useRef hook.
const component1: React.FC<Props> = props {
const node =useRef<HTMLDivElement>(null);
const ClickListener = UseCallback((e:any)=>{
if(node.current.contains(e.target))
console.log("Event Contained");
else console.log("Event not Contained");
},[]);
return (
<div ref={node} onClick={ClickListener}>
<FormControl>
<InputLabel>{text}</InputLabel>
<Select> {contents} </Select>
</FormControl>
</div>
);
};
This Component1 is being called by both componentX and componentY.
However, the code above seems to be failing to detect the onclick event on a componentX's node when componentY's select menu is open.
Only after closing ComponentY's select menu and clicking again on ComponentX is the event recognized. Do you have any suggestions on why this isn't working as expected? Just to note, I am utilizing Material UI's select component.