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>
}

[dd-jonas]

@RobinMalfait Any updates on this? And why has it been moved to a discussion when this is a regression?

[MILLERMARRU]

I dug into packages/@headlessui-react/src/hooks/use-handle-toggle.tsx, which is what MenuButton actually wires up instead of a plain onClick:

export function useHandleToggle(cb) {
  const pointerTypeRef = useRef<'touch' | 'mouse' | 'pen' | null>(null);

  const handlePointerDown = useEvent((event) => {
    pointerTypeRef.current = event.pointerType;
    if (event.pointerType !== 'mouse') return;
    // ...
    cb(event);
  });

  const handleClick = useEvent((event) => {
    if (pointerTypeRef.current === 'mouse') return; // <-- this
    // ...
    cb(event);
  });

  return { onPointerDown: handlePointerDown, onClick: handleClick };
}

The toggle logic for a real mouse click actually runs on pointerdown now (so focus doesn't get stolen away from a focused <input> before the click finishes, there's a comment in the same file referencing the classic React issue 7711 workaround). onClick only exists to catch touch/pen taps, which never get a pointerdown-based toggle, so it deliberately no-ops whenever pointerTypeRef.current === 'mouse'.

The problem is pointerTypeRef is a plain useRef that's never reset. The first time that MenuButton gets a real mouse click, pointerTypeRef.current becomes 'mouse' and stays that way for the component's lifetime. From then on, calling ref.current.click() programmatically dispatches a click event with no preceding pointerdown, so it lands in handleClick, sees pointerTypeRef.current === 'mouse' from that earlier real interaction, and bails out silently. This isn't React 19 specific, it's this pointerdown/click split, it'll reproduce on React 18 too as soon as the button has been clicked once with a mouse.

Workaround that works today, force pointerTypeRef back to a non-mouse value right before the synthetic click:

menuButtonRef.current?.dispatchEvent(
  new PointerEvent('pointerdown', { pointerType: 'touch', bubbles: true })
);
menuButtonRef.current?.click();

The first line gets swallowed by handlePointerDown's own early return (pointerType !== 'mouse'), but it resets the ref, so the click that follows goes through handleClick normally.