fix(search): add backdrop overlay to autocomplete dropdown (#982)#986
fix(search): add backdrop overlay to autocomplete dropdown (#982)#986ericsocrat merged 1 commit intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
📸 PR ScreenshotsCaptured 2 screenshots (1 mobile, 1 desktop) for 1 changed page(s):
📥 Download screenshots from workflow artifacts. Captured by PR Screenshots workflow • 2026-03-19 |
Bundle Size Report
✅ Bundle size is within acceptable limits. |
There was a problem hiding this comment.
Pull request overview
Adds a dimming backdrop behind the search autocomplete dropdown to improve visual focus and provide a click-to-dismiss target on the search page.
Changes:
- Add a full-viewport translucent backdrop element behind the autocomplete dropdown.
- Wire backdrop clicks to
onCloseand animate it with the existingbackdropInkeyframes. - Add tests verifying backdrop render/absence and click-to-dismiss behavior.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| frontend/src/components/search/SearchAutocomplete.tsx | Introduces a fixed-position backdrop overlay and wraps dropdown rendering in a fragment. |
| frontend/src/components/search/SearchAutocomplete.test.tsx | Adds unit tests covering backdrop rendering and dismiss interaction. |
| <div | ||
| className="fixed inset-0 z-40 bg-black/20 animate-[backdropIn_150ms_var(--ease-standard)]" | ||
| onClick={onClose} | ||
| aria-hidden="true" | ||
| data-testid="autocomplete-backdrop" | ||
| /> |
There was a problem hiding this comment.
The fixed inset-0 backdrop will sit above the search input/clear button (which don’t have a higher z-index) and will intercept clicks there, immediately dismissing the dropdown and preventing users from placing the caret / clicking the clear button while suggestions are open. If the intent is to dim only the page content behind the dropdown (not the input), consider scoping the backdrop to start below the input (e.g., top offset) or ensuring the input wrapper is stacked above the backdrop (higher z-index) so it remains interactive.
| {/* Backdrop overlay — dims content behind the dropdown */} | ||
| <div | ||
| className="fixed inset-0 z-40 bg-black/20 animate-[backdropIn_150ms_var(--ease-standard)]" | ||
| onClick={onClose} |
There was a problem hiding this comment.
Clicking the backdrop will currently trigger onClose via two paths: (1) the existing document-level mousedown outside-click handler (because the backdrop is not contained in containerRef), and (2) this backdrop’s onClick. In real usage this is often masked by unmounting on mousedown, but it can still lead to duplicate onClose calls (and makes tests less precise). Suggest either removing/adjusting the document mousedown listener when the backdrop is present, or handling dismissal on the backdrop’s onMouseDown with stopPropagation() and dropping the onClick handler.
| onClick={onClose} | |
| onMouseDown={(event) => { | |
| event.stopPropagation(); | |
| onClose(); | |
| }} |
| ); | ||
| const backdrop = screen.getByTestId("autocomplete-backdrop"); | ||
| fireEvent.click(backdrop); | ||
| expect(onClose).toHaveBeenCalled(); |
There was a problem hiding this comment.
This test only asserts that onClose was called, but with the current implementation a backdrop click can invoke onClose twice (document mousedown outside-click handler + backdrop onClick) when onClose doesn’t immediately unmount the component (as in this test). Strengthen this assertion to toHaveBeenCalledTimes(1) (and/or adjust the interaction to match the chosen dismissal event) so the test catches duplicate-close regressions.
| expect(onClose).toHaveBeenCalled(); | |
| expect(onClose).toHaveBeenCalledTimes(1); |
Summary
Adds a translucent backdrop overlay behind the autocomplete dropdown on the search page. When suggestions appear, a �g-black/20 overlay dims the background, providing clear visual focus on the dropdown content.
Changes
Design Decisions
Verification
Closes #982