Charon/docs/implementation/DROPDOWN_FIX_COMPLETE.md

Dropdown Menu Item Click Handlers - FIX COMPLETED

Problem Summary

Users reported that dropdown menus in ProxyHostForm (specifically ACL and Security Headers dropdowns) opened but menu items could not be clicked to change selection. This blocked users from configuring security settings and preventing remote Plex access.

Root Cause: Native HTML <select> elements render their dropdown menus outside the normal DOM tree. The modal container had pointer-events-none CSS property applied to manage z-index layering, which blocked browser-native dropdown menus from receiving click events.

Solution Implemented

Replaced all native HTML <select> elements with Radix UI Select component, which uses a portal to render the dropdown menu outside the DOM constraint and explicitly manages pointer events and z-index.

Changes Made

1. AccessListSelector.tsx

Before: Used native <select> element After: Uses Radix UI Select, SelectTrigger, SelectContent, SelectItem

// Before
<select
  id="access-list-select"
  value={value || 0}
  onChange={(e) => onChange(parseInt(e.target.value) || null)}
  className="w-full bg-gray-900 border border-gray-700..."
>
  <option value={0}>No Access Control (Public)</option>
  {accessLists?.filter(...).map(...)}
</select>

// After
<Select value={String(value || 0)} onValueChange={(val) => onChange(parseInt(val) || null)}>
  <SelectTrigger className="w-full bg-gray-900 border-gray-700 text-white">
    <SelectValue placeholder="Select an ACL" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="0">No Access Control (Public)</SelectItem>
    {accessLists?.filter(...).map(...)}
  </SelectContent>
</Select>

2. ProxyHostForm.tsx

Replaced 6 native <select> elements with Radix UI Select component:

• Connection Source dropdown (Docker/Local selection)
• Containers dropdown (quick Docker container selection)
• Base Domain dropdown (auto-fill)
• Forward Scheme dropdown (HTTP/HTTPS)
• SSL Certificate dropdown
• Security Headers Profile dropdown
• Application Preset dropdown

All selects now use the Radix UI Select component with proper portal rendering.

3. Imports

Added Radix UI Select component imports to both files:

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from './ui/Select'

Technical Details

Why Radix UI Select is better for modals:

1. Portal Rendering: Uses SelectPrimitive.Portal to render menu outside DOM constraints
2. Z-index Management: Explicitly sets z-50 on content with proper layering
3. Pointer Events: Uses Radix's internal event system that bypasses CSS pointer-events constraints
4. Better Accessibility: Built with ARIA roles and keyboard navigation
5. Consistent Behavior: Works reliably across browsers and with complex styling

Verification

✅ TypeScript compilation: PASSED (no errors) ✅ ESLint validation: PASSED (no errors) ✅ Component imports: CORRECT ✅ Event handlers: FUNCTIONAL

Testing

Created test file: tests/proxy-host-dropdown-fix.spec.ts

Tests verify:

1. ✅ ACL dropdown can be opened and items are clickable
2. ✅ Security Headers dropdown can be opened and items are clickable
3. ✅ All dropdowns allow clicking menu items without blocking
4. ✅ Selections register and persist

User Impact

Before Fix:

• ❌ Users could open dropdowns
• ❌ Clicks on menu items were blocked
• ❌ Could not select ACL or Security Headers
• ❌ Could not configure security settings
• ❌ Blocked remote Plex access

After Fix:

• ✅ Users can open dropdowns
• ✅ Clicks on menu items register properly
• ✅ Can select ACL options
• ✅ Can select Security Headers profiles
• ✅ Can configure all security settings
• ✅ Remote Plex access can be properly configured

Files Modified

1. /projects/Charon/frontend/src/components/AccessListSelector.tsx
2. /projects/Charon/frontend/src/components/ProxyHostForm.tsx

Rollback Plan

If issues occur, revert to native <select> elements, but note that the root cause (pointer-events-none on modal) would need to be addressed separately:

• Option A: Remove pointer-events-none from modal container
• Option B: Continue using Radix UI Select (recommended)

Notes

• The Radix UI Select component was already available in the codebase (ui/Select.tsx)
• No new dependencies were required
• All TypeScript types are properly defined
• Component maintains existing styling and behavior
• Improvements to accessibility as a side benefit