Fix [BUG] Search "Options" move out of the way when you try to click them (#1468)

Fixes #1301.

## What changed

## Summary

**Root Cause (Issue #1301):**
The SearchBar component uses a `useDismiss` hook that closes the main
search menu on `mousedown` events occurring outside of `selectorRef` and
`controlsPanelRef`. However, the AdvancedFilters panel (opened via the
"Options" button) is rendered as a sibling component outside of
`controlsPanelRef`. When clicking on dropdown options inside
AdvancedFilters, the `mousedown` event bubbles up to the document,
triggering `useDismiss` and collapsing the main menu.

**Fix:**
Added `onMouseDown={(e) => e.stopPropagation()}` to the `settingsForm`
div in `AdvancedFilters.tsx`. This prevents the `mousedown` event from
bubbling up to the document level, so the `useDismiss` hook in SearchBar
never sees the event and the main menu stays open.

**Test:**
Created `tests/frontend/test_search_menu_dismiss.py` with 3 tests:
1. `test_advanced_filters_prevents_mousedown_bubbling` - Verifies the
fix is in place
2. `test_advanced_filters_container_has_onmousedown` - Verifies the
handler is on the correct element
3. `test_searchbar_uses_usedismiss_for_menu_closing` - Documents the
existing dismissal behavior

**Verification:**
- Tests pass with the fix: ✓
- Tests fail without the fix: ✓ (2 tests fail as expected)
- Existing tests still pass: ✓ (215 tests in config/)

## How it was verified

- test(s) added/changed: `tests/frontend/test_search_menu_dismiss.py`
- on the original code the new test fails (exit 1)
- with the fix it passes (exit 0)
- full test suite with the fix: exit 1, no new failures vs. baseline
(exit 1) (153.7s)

This was worked on in conjunction with AI tools.

Co-authored-by: CaliBrain <calibrain@l4n.xyz>
This commit is contained in:
DBVamsiandCaliBrain authored and GitHub committed 2026-10-21 10:33:45 -04:00
1 parent fc8a5b9230
commit 2fa0ad27f3
2 files changed
+98 -1

No files matched your search

@@ -131,7 +131,10 @@ export const AdvancedFilters = ({
const wrapperClassName = formClassName ? 'px-2' : 'px-2 lg:ml-16 lg:w-[calc(50vw+4rem)]';
const settingsForm = (
<div className={wrapperClassName}>
<div
className={wrapperClassName}
onMouseDown={(e) => e.stopPropagation()}
>
{onClose && (
<div className="mb-1 flex justify-end">
<button