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: 71a061d

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 25, 2025 4:44pm

[github-actions]

E2E Test Results

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

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

View full report →

[claude]

PR Review: Update Drawers to do a proper focus trap

Critical Issues

✅ No critical issues found.

Code Quality Notes

Good changes:

• ✅ Properly migrated from react-modern-drawer to Mantine Drawer component (follows CLAUDE.md preference for Mantine UI)
• ✅ Implemented proper focus trap with withCloseButton={false} and keyboard navigation (ESC key handling)
• ✅ Fixed accessibility issues by preventing unwanted clicks through overlays
• ✅ Consistent prop naming: open → opened, direction → position (Mantine conventions)
• ✅ Updated E2E tests to use proper data-testid selectors instead of CSS class selectors
• ✅ Popover portal fix in DBRowTableFieldWithPopover.tsx prevents z-index issues within drawers

Minor observations:

• ⚠️ DBRowSidePanel.tsx still uses useClickOutside hook alongside Mantine Drawer built-in onClose - this creates two click-outside handlers. This appears intentional for the custom drag bar feature but worth noting for future reference.
• ℹ️ All drawers now use withCloseButton={false} and implement custom close buttons, maintaining consistent UI patterns

Summary

This is a clean refactoring that improves accessibility and user experience. The migration to Mantine Drawer is well-executed and aligns with the project architectural guidelines. No blocking issues.

[pulpdrew]

🤠

[pulpdrew]

This is great because I can see the popovers now, but I'm also seeing that the add / exclude filter buttons are not having an effect when in the side drawer other than closing the side drawer:

Screen.Recording.2025-10-25.at.11.36.27.AM.mov

[brandon-pereira]

Thank you for testing it! I tested so many things to ensure the zindex worked, but didn't click it 😆 . The issue was the tooltips were rendering in a portal and now with the accessibility improvements, the drawer was auto-closing due to a click outside the modal. I fixed this by ensuring the tooltips render in the same container as the table, thus avoiding the portal click outside logic