[dialog][alert dialog][popover] Fix focus management for children with positive tabindex

[michaldudak]

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

Fixes #3844

[pkg-pr-new]

• base-ui-tanstack-start

• 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: 3d531d0

[mui-bot]

Bundle size report

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

Details of bundle changes

---

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

[greptile-apps]

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]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	3d531d0
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/698a03e2cc700c00085453bc
😎 Deploy Preview	https://deploy-preview-3846--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[mj12albert]

Is it expected that for popover this doesn't work with modal={true} like dialog? https://stackblitz.com/edit/nht123vz?file=src%2FApp.tsx

They are documented the same: true: user interaction is limited to the popover

[michaldudak]

Yes, it's deliberate.

[atomiks]

Does Radix handle this? imo if it doesn't, let's leave it off. It adds extra cost to handle an edge case that's bad to begin with (you should never use positive tab indices)

[michaldudak]

No, they explicitly ignore it:
https://github.com/radix-ui/primitives/blob/main/packages/react/focus-scope/src/focus-scope.tsx#L259
I suppose you're right, the use case is quite exotic anyway.