Skip to content

Conversation

@atomiks
Copy link
Contributor

@atomiks atomiks commented Jan 30, 2026

Listeners that execute on keydown around Group level should allow to be called and not be blocked by typeahead, as in Radix.

@atomiks atomiks added component: menu Changes related to the menu component. type: bug It doesn't behave as expected. labels Jan 30, 2026
@pkg-pr-new
Copy link

pkg-pr-new bot commented Jan 30, 2026

commit: 8a8e8f6

@mui-bot
Copy link

mui-bot commented Jan 30, 2026

Bundle size report

Bundle Parsed size Gzip size
@base-ui/react 🔺+293B(+0.07%) 🔺+72B(+0.05%)

Details of bundle changes


Check out the code infra dashboard for more information about this PR.

@netlify
Copy link

netlify bot commented Jan 30, 2026

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit 8a8e8f6
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/697c1c0ebb39eb00086acca8
😎 Deploy Preview https://deploy-preview-3889--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@atomiks atomiks force-pushed the fix/menu-typeahead-keydown branch from f89652a to aa83d88 Compare January 30, 2026 02:40
@atomiks atomiks force-pushed the fix/menu-typeahead-keydown branch from aa83d88 to 8a8e8f6 Compare January 30, 2026 02:48
@atomiks atomiks marked this pull request as ready for review January 30, 2026 02:50
@greptile-apps
Copy link
Contributor

greptile-apps bot commented Jan 30, 2026

Greptile Overview

Greptile Summary

This PR enables onKeyDown handlers at the Menu.Group level to receive typeahead events while preventing parent menus from re-processing them.

Key changes:

  • Introduced a WeakSet-based tracking mechanism to mark typeahead events as handled without mutating them
  • Added stopPropagation parameter to useTypeahead (defaults to true for backward compatibility)
  • Configured nested menus to allow event bubbling (stopPropagation: false) while stopping propagation at the root level
  • Added comprehensive tests validating Group handlers receive events and propagation stops at menu root

Implementation approach:
The solution uses a module-level WeakSet<Event> to track which native events have been processed by typeahead. When an event bubbles up to parent menus, they check if it's already been handled and skip typeahead processing. The stopPropagation flag is set to false for nested menus (parent.type === 'menu' || parent.type === 'nested-context-menu') allowing events to bubble through the menu tree, but remains true at the root to prevent events from escaping to higher-level listeners.

Confidence Score: 5/5

  • This PR is safe to merge with minimal risk
  • The implementation is well-designed with a clean WeakSet-based approach for event tracking, comprehensive tests validate the behavior, and the changes are backward compatible (stopPropagation defaults to true)
  • No files require special attention

Important Files Changed

Filename Overview
packages/react/src/floating-ui-react/hooks/useTypeahead.ts Replaced stopEvent with handleTypeaheadEvent to enable conditional event propagation via WeakSet tracking
packages/react/src/menu/root/MenuRoot.tsx Added stopPropagation: false for nested menus to allow event bubbling through menu tree
packages/react/src/menu/group/MenuGroup.test.tsx Added tests verifying Group handlers receive typeahead events and events don't bubble above menu root

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

component: menu Changes related to the menu component. type: bug It doesn't behave as expected.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants