AI & Agent Dev Bug Sandbox logo
AI & Agent Dev Bug Sandbox
Back to Radar

Invisible Navigation-Menu Viewport Blocks Clicks And Text Selection After Dropdown Closes

On supabase.com, opening and closing a navbar mega-menu leaves a permanently mounted container (forceMount) that overlays hero content and intercepts pointer events, preventing text selection and CTA clicks.

highConfidence 85%Next.js

Origin Analysis

apps/www/components/Nav/index.tsx uses NavigationMenuViewport with forceMount to keep the viewport mounted for smooth animations when switching dropdowns. The wrapper div (absolute top-full flex justify-center inset-x-0) remains in the DOM after close but has no pointer-events-none, so it captures all pointer events over the hero area.
1. Go to https://supabase.com on desktop. 2. Click/hover Product in navbar to open mega-menu. 3. Move mouse away or press Esc to close the dropdown. 4. Attempt to select hero heading or click 'Start your project' / 'Request a demo'. 5. Observe that text cannot be selected and buttons do not respond; DevTools elementFromPoint returns the wrapper div.

Fixing Code Block

Edge Case Audit

This change is scoped to apps/www only. Ensure the inner visible box still has pointer-events-auto, otherwise the dropdown itself will become non-interactive. The attribute selector may affect any other Radix NavigationMenuViewport used within apps/www; verify no unintended menus exist. If issues arise, rollback by removing this CSS block; the original forceMount behavior will return but the overlay bug will persist until a proper unmount-on-close is implemented.

Ecosystem Topology