mirror of
https://github.com/calibrain/shelfmark.git
synced 2026-11-15 21:08:12 +00:00
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:
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
|
||||
|
||||
Reference in new issue
Block a user