Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

MenuButton ref not working in React 19 #3706

Unanswered
dd-jonas asked this question in Help
Discussion options

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>
}
You must be logged in to vote

Replies: 1 comment

Comment options

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

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Help
Labels
None yet
1 participant
Converted from issue

This discussion was converted from issue #3705 on April 25, 2025 09:18.

AltStyle によって変換されたページ (->オリジナル) /