Unable to call the function of Child Component in Parent Component onScroll

Question

I am able to close the HeadlessUI Menu component when I call the function through onScroll event within the child component but when I am passing it to the parent component and calling the same function through onScroll method in parent component, it's not working as its meant to be, please can someone spare some time to have a look where is the error. I need to make it work; I am struggling with this since weeks.

Here is the minimal reproduction:

https://codesandbox.io/p/devbox/fancy-tree-x3vs7x

/* Parent Component */
import { useRef } from 'react'
import SidebarMenuElement from '@/Layouts/Authenticated/Partials/Sidebar/MenuElement'

export default function Sidebar() {
    const sidebarMenuElementRef = useRef()

    return (
        <>
            <div>
                <div
                    className="h-full w-[inherit] overflow-y-auto scroll-smooth"
                    style={{ scrollbarGutter: 'stable both-edges' }}
                    onScroll={() => sidebarMenuElementRef.current}
                >
                    <nav>
                        <div>
                            <ul>
                                {navigation.map((item, i) => (
                                    <li key={item.name}>
                                        <SidebarMenuElement
                                            data={item}
                                            ref={sidebarMenuElementRef}
                                        />
                                    </li>
                                ))}
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </>
    )
}

/* Child Component */
import { useRef, forwardRef, useImperativeHandle } from 'react'
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
import { Link } from '@inertiajs/react'

const SidebarMenuElement = forwardRef(function SidebarMenuElement(props, ref) {
    const { data } = props

    const menuButtonElementRef = useRef(() => {})

    useImperativeHandle(ref, () => () => menuButtonElementRef.current())

    return (
        <>
            <Menu>
                {({ close }) => (
                    <>
                        <MenuButton
                            ref={() => (menuButtonElementRef.current = close)}
                        >
                            <span>
                                <data.icon />
                            </span>
                        </MenuButton>
                        <MenuItems onScroll={menuButtonElementRef.current}>
                            <MenuItem>
                                <Link />
                            </MenuItem>
                        </MenuItems>
                    </>
                )}
            </Menu>
        </>
    )
})

export default SidebarMenuElement

Answer 1

You can stop this by stopping the propagation, which prevents the event from bubbling up the DOM tree and stops any parent handlers from being notified of the event.

onClick={(e) => {
e.stopPropagation();
}}

Hope this helps! If it doesn't, please share the code base using StackBlitz.