Skip to content

Conversation

@michaldudak
Copy link
Member

Fixed modal focus trapping when Dialogs or Popovers contain positive tabIndex elements by adding manual Tab cycling in FloatingFocusManager.

Fixes #3844

@michaldudak michaldudak requested a review from atomiks as a code owner January 23, 2026 10:29
@michaldudak michaldudak added the component: alert dialog Changes related to the alert dialog component. label Jan 23, 2026
@michaldudak michaldudak added component: dialog Changes related to the dialog component. component: popover Changes related to the popover component. labels Jan 23, 2026
@michaldudak michaldudak changed the title [popups] Fix focus management for children with positive tabindex [dialog][alert dialog][popover] Fix focus management for children with positive tabindex Jan 23, 2026
@pkg-pr-new
Copy link

pkg-pr-new bot commented Jan 23, 2026

  • vite-css-base-ui-example

    pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@3846
    
    pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@3846
    

commit: 2231a7a

@mui-bot
Copy link

mui-bot commented Jan 23, 2026

Bundle size report

Bundle Parsed size Gzip size
@base-ui/react 🔺+216B(+0.05%) 🔺+110B(+0.08%)

Details of bundle changes


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

@greptile-apps
Copy link

greptile-apps bot commented Jan 23, 2026

Greptile Summary

Fixes focus trap breaking when modal dialogs or popovers contain elements with tabIndex greater than 0. The fix adds manual Tab key cycling in FloatingFocusManager to prevent positive tabIndex elements from jumping ahead of focus guards in the browser's global tab order.

  • Detects when tabbable content includes positive tabIndex values
  • Manually cycles focus forward/backward through tabbable elements
  • Preserves the focus trap by preventing default Tab behavior
  • Comprehensive test coverage for both Dialog and FloatingFocusManager

Confidence Score: 5/5

  • This PR is safe to merge with minimal risk
  • The implementation is clean, well-tested, and solves a specific focus management bug. The logic correctly handles both forward and backward Tab navigation with proper edge case handling. Tests verify the fix works for both Dialog and FloatingFocusManager components.
  • No files require special attention

Important Files Changed

Filename Overview
packages/react/src/floating-ui-react/components/FloatingFocusManager.tsx Added manual Tab cycling logic to trap focus when positive tabIndex elements are present
packages/react/src/floating-ui-react/components/FloatingFocusManager.test.tsx Added test coverage for focus trapping with positive tabIndex elements
packages/react/src/dialog/root/DialogRoot.test.tsx Added Dialog-specific test for focus trap with positive tabIndex elements

@netlify
Copy link

netlify bot commented Jan 23, 2026

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit 2231a7a
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/69735123588cb100088089d0
😎 Deploy Preview https://deploy-preview-3846--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.

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

Labels

component: alert dialog Changes related to the alert dialog component. component: dialog Changes related to the dialog component. component: popover Changes related to the popover component.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Dialogs] focus trap breaks when dialog contains an element with tabIndex greater than 0

2 participants