MenuButton ref not working in React 19

[dd-jonas]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.2.2

What browser are you using?

For example: Chrome

Describe your issue

I'm trying to open a Menu programatically by passing a ref to MenuButton and calling ref.current.click(). This does not seem to work anymore with React 19.

function MyComponent() {
  const menuButtonRef = useRef(null);

  // Open the menu with the cmd-K shortcut
  useEffect(() => {
    const onKeydown = (e: KeyboardEvent) => {
      if ((e.key === 'k' || e.key === 'K') && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        console.log('cmd-K'); // This logs as expected
        menuButtonRef.current?.click(); // This does nothing
      }
    };

    document.addEventListener('keydown', onKeydown);
    return () => document.removeEventListener('keydown', onKeydown);
  }, []);

  return(
    <Menu>
      <MenuButton ref={menuButtonRef}>
        Button
      </MenuButton>

      <MenuItems anchor={{ to: 'bottom start', gap: 4 }} modal={false}>
        ...
      </MenuItems>
    </Menu>
}