Inconsistent focus behavior of the MenuItems component

[lukejagodzinski]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.1.8

What browser are you using?

Chrome Version 129.0.6668.58 (Official Build) (arm64)

Reproduction URL

https://codesandbox.io/p/devbox/5g77y7

Describe your issue

When opening (using keyboard) dropdown menu for the first and second time there is inconsistent focus behavior. After opening menu for the first time, neither of the items is focused. However, when I open it for the second time the first element gets focused.

I've included CodeSandBox reproduction but also pasting code and reproduction steps here.

<div className="flex flex-row w-full gap-2 justify-center items-center">
  <Button autoFocus className="border p-2 bg-gray-100">
    Before
  </Button>
  <Menu>
    <MenuButton className="border p-2 bg-gray-100">My account</MenuButton>
    <MenuItems anchor="bottom" className="bg-gray-100 border">
      <MenuItem className="data-[focus]:bg-gray-600 data-[focus]:text-white p-2">
        <div>Settings</div>
      </MenuItem>
      <MenuItem className="data-[focus]:bg-gray-600 data-[focus]:text-white p-2">
        <div>Support</div>
      </MenuItem>
      <MenuItem className="data-[focus]:bg-gray-600 data-[focus]:text-white p-2">
        <div>License</div>
      </MenuItem>
    </MenuItems>
  </Menu>
  <button className="border p-2 bg-gray-100">After</button>
</div>

Steps to reproduce:

• Press TAB key
• Press SPACE key to open menu (the first menu item not focused)
• Press SPACE key to close menu
• Press SPACE key to open menu (the first menu item focused)