tanstack.com
tanstack.com copied to clipboard
fix: resolve search dropdown unable to reopen in same session
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
onInteractOutsidehandler - 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"]andbutton[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.