Unable to manually close Menu Component

[sahebyuvrajsingh]

What package within Headless UI are you using?
@headlessui/react

What version of that package are you using?
v2.0.4

What browser are you using?
Chrome & Edge

Describe your issue
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. Is it the way HeadlessUI works or it's just a bug which is not yet fixed. I need to make it work; I am struggling with this since weeks. Thanks!

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

[RobinMalfait]

Hey!

Can you share a minimal reproduction repo that I can run locally to help debug this? While these snippets can be useful, they only paint a small part of the picture unfortunately.

However, one thing I noticed is that you don't call the function in the Sidebar component's onScroll. There are 2 ways to fix this:

  /* 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}
+                     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

Or

  /* 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}
+                     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

Does this work for you?

[sahebyuvrajsingh]

Hey, really thank you for your response. I tried it before, but it wasn't working. Here is the minimal reproduction https://codesandbox.io/p/devbox/fancy-tree-x3vs7x for the same. Thank you really for your time.

[sahebyuvrajsingh]

@RobinMalfait Sir, can you please spare me some time and have a look, have shared the minimal reproduction. If there is a solution to this I would be really glad!

[RobinMalfait]

Hey! This should be fixed by #3407, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.