tanstack.com icon indicating copy to clipboard operation
tanstack.com copied to clipboard

fix: resolve search dropdown unable to reopen in same session

Open Dhavanesh24cs412 opened this issue 1 week ago • 2 comments

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

  • [x] Dropdown opens on first click
  • [x] Dropdown closes on second click
  • [x] Dropdown opens again on third click (previously broken - NOW FIXED!)
  • [x] Multiple open/close cycles work consistently
  • [x] Keyboard navigation works correctly (arrow keys, escape key)
  • [x] Clicking outside dropdown closes it naturally
  • [x] Framework preference persists correctly
  • [x] No console errors or warnings
  • [x] 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.

Dhavanesh24cs412 avatar Jan 14 '26 19:01 Dhavanesh24cs412