Update Drawers to do a proper focus trap

[brandon-pereira]

Improves user reported issues that clicking outside the modal would click elements unexpectedly, also improves accessibility (keyboard focus trap & esc to exit)

Fixes HDX-2642

[changeset-bot]

🦋 Changeset detected

Latest commit: 023ebb1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@hyperdx/app	Patch
@hyperdx/api	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
hyperdx-v2-oss-app	Ready	Preview	Comment	Oct 23, 2025 3:41pm

[github-actions]

E2E Test Results

✅ All tests passed • 26 passed • 3 skipped • 236s

Status	Count
✅ Passed	26
❌ Failed	0
⚠️ Flaky	0
⏭️ Skipped	3

View full report →

[claude]

PR Review: Update Drawers to do a proper focus trap

✅ Overall Assessment: Good migration from react-modern-drawer to Mantine native Drawer component with focus trap improvements.

Critical Issues

• ⚠️ Conflicting click handlers in DBRowSidePanel (packages/app/src/components/DBRowSidePanel.tsx:498-502) → The useClickOutside hook conflicts with Mantine Drawer built-in overlay/focus trap. Mantine Drawer already handles click-outside behavior via onClose - remove useClickOutside and the drawerRef as they can cause double-closing or prevent proper focus trap behavior.

Recommendations

• 🔍 Missing closeOnClickOutside prop → Mantine Drawer has a closeOnClickOutside prop (defaults to true). For drawers that should not close on outside clicks when sub-drawers are open, explicitly set closeOnClickOutside={!subDrawerOpen} instead of using custom click handlers.

• 📝 Inconsistent escape key handling → Only DBRowSidePanel has useHotkeys for ESC. Mantine Drawer has built-in closeOnEscape prop (defaults to true). Consider using closeOnEscape={!subDrawerOpen} for consistency instead of manual hotkey handling.

Minor Notes

• ✅ Correctly removed react-modern-drawer dependency
• ✅ E2E tests updated with proper selectors
• ✅ Consistent withCloseButton={false} usage across all drawers
• ✅ Proper zIndex management maintained