CODEWITHSUNDEEP
cssreactjsmouseleave
theCodingPro
theCodingPro

Reputation: 33

mouseleave event being triggered when crossing child div borders. Only supposed to fire when leaving container div borders

So the "mouseleave" is being triggered when i leave the styledLink child component and is firing. I have it on the container and want it to fire when I leave the whole container. I've tried a lot of potential solutions but Gatsby doesnt seem to want to work well with these event listeners. Any input help! Thanks :)

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);
`;

Upvotes: 0

Views: 235

Answers (1)

theCodingPro
theCodingPro

Reputation: 33

I needed to make sure that "pointer-events: auto;" was applied on all the child components. This resolved it

Upvotes: -1

Related Questions