When leaving the styledLink child component, the "mouseleave" event is triggered. However, I want it to trigger when leaving the entire container. I've attempted various solutions but Gatsby doesn't seem to cooperate well with these event listeners. Any suggestions or help would be greatly appreciated! Thank you :)
const MenuDropDown: React.FC<{Props}> =
({ menuLinks = [
{ title: 'Events', url: '/events' },
{ title: 'Performers', url: '/performers' },
{ title: 'Venues', url: '/venues' },
], setFocus, focus, explore }) => {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
/**
* Alert if hovered outside of element
*/
function handleUserEvent(event: any) {
event.stopPropagation();
console.log("fired");
console.log(ref.current);
if (ref && ref.current) {
setFocus(false);
}
}
// Bind the event listener
ref.current?.addEventListener('mouseleave', handleUserEvent);
return () => {
ref.current?.removeEventListener('mouseleave', handleUserEvent);
};
}, [ref]);
return (
<S.Wrapper explore={explore}>
<S.Container ref={ref}>
{menuLinks.length > 0 &&
menuLinks.map((data, key) => {
const url = data.url;
const title = data.title;
return (
<S.StyledLink key={key} activeStyle={{ background: 'rgb(245, 245, 244)' }} to={url}>
{title}
</S.StyledLink>
);
})}
</S.Container>
</S.Wrapper>
);
};
export default MenuDropDown;
export const Wrapper = styled.div<{ explore?: boolean; isAuthenticated?: boolean }>`
box-shadow: rgb(36 63 97 / 12%) 0px 3px 20px, rgb(36 63 97 / 8%) 0px 1.5px 4px;
border-radius: 10px;
//opacity: 0;
background-color: white;
position: absolute;
top: 100%;
display: block;
z-index: 1000;
height: 100%;
pointer-events: none;
/* transition: opacity 200ms ease-in-out 0s; */
width: 140px;
margin-top: 28px;
margin-right: ${(props) => (props.explore ? '65px' : null)};
margin-left: ${(props) => (props.explore ? null : '250px')};
`;
export const Container = styled.div`
pointer-events: none;
z-index: 900;
display: flex;
flex-direction: column;
padding: 1.25rem;
border-radius: 10px;
//background: rgba(245, 245, 244, 0.2);
background: white;
border-right: 1px solid rgba(0, 0, 0, 0.08);
/* height: 200px;
margin-top: 200px; */
`;
export const StyledLink = styled(Link)`
pointer-events: auto;
text-align: left;
-webkit-font-smoothing: antialiased;
font-family: proxima-nova, 'Proxima Nova', 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-size: 1.5rem;
line-height: 1.575rem;
margin: 5px 0px;
font-weight: 500;
/* box-sizing: border-box; */
width: 100%;
padding: 0.95rem 1.15rem;
border-radius: 0.5rem;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: rgb(24, 24, 24);
`;