Skip to content

Conversation

@Dhavanesh24cs412
Copy link

@Dhavanesh24cs412 Dhavanesh24cs412 commented Jan 14, 2026

Description

Fixes issue #650 where the framework and library dropdown menus in the search modal could only be opened once per search session.

What Changed

  • Removed modal={true} prop from Dropdown component that was blocking re-opens
  • Replaced defensive event handlers with intelligent onInteractOutside handler
  • Added DOM boundary detection to distinguish between inside/outside clicks
  • Dropdown state is properly managed via SearchFiltersContext

Closes #650

Testing

  • Dropdown opens on first click
  • Dropdown closes on second click
  • Dropdown opens again on third click (previously broken - NOW FIXED!)
  • Multiple open/close cycles work consistently
  • Keyboard navigation works correctly (arrow keys, escape key)
  • Clicking outside dropdown closes it naturally
  • Framework preference persists correctly
  • No console errors or warnings
  • Tested locally on localhost:3000

Technical Details

Root Cause

The modal={true} prop in Radix Dropdown creates a modal context that blocks interactions with elements outside the dropdown, preventing proper state management for reopening.

Solution

Implemented an intelligent onInteractOutside handler that:

  • Allows natural closing when clicking outside the dropdown
  • Prevents closing when clicking on dropdown UI elements
  • Uses DOM selectors ([role="listbox"] and button[class*="dropdown"]) to intelligently determine boundaries

Files Changed

  • src/components/Dropdown.tsx: Added onInteractOutside with boundary detection
  • src/components/SearchModal.tsx: Removed modal={true} prop

Why This Matters

TanStack Docs search is a critical feature. Users often need to filter by multiple libraries/frameworks in a single search session, making this dropdown reopening capability essential for a smooth user experience.

…ck#650)

## Problem
The framework and library dropdown menus in the search modal could only be opened
once per search session. After the first open-close cycle, subsequent attempts to
open the dropdown would fail until the entire search modal was closed and reopened.

## Root Cause
The `modal={true}` prop in the Radix Dropdown component creates a modal context
that blocks interactions with elements outside the dropdown. This prevented proper
state management and focus handling for reopening the dropdown.

## Solution
1. Removed `modal={true}` prop from Dropdown component
2. Removed overly defensive event handlers (onPointerDownOutside, onEscapeKeyDown)
3. Implemented intelligent `onInteractOutside` handler with boundary detection

## Changes
- src/components/Dropdown.tsx: Added onInteractOutside with boundary detection
- src/components/SearchModal.tsx: Removed modal={true} prop

## Testing
✅ Dropdown opens on first click
✅ Dropdown closes on second click
✅ Dropdown opens again on third click (previously broken - NOW FIXED!)
✅ Multiple open/close cycles work consistently
✅ Keyboard navigation works correctly
✅ Clicking outside dropdown closes it naturally

Fixes TanStack#650
@netlify
Copy link

netlify bot commented Jan 14, 2026

👷 Deploy request for tanstack pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit c09ae95

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] Dropdown reopens fail due to modal context blocking

1 participant