Feature: Add clear button and fix dropdown z-index

Changes:
1. Added clear (X) button in search bar
   - Only appears when there's text
   - Clears search query AND filters
   - Clean X icon with hover effect

2. Fixed dropdown z-index
   - Changed from z-index: 50 to z-index: 9999
   - Now appears above all other UI elements

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Your Name 2025-12-23 20:05:32 -05:00
parent 797859ac80
commit b013a71ea6
2 changed files with 43 additions and 1 deletions

View File

@ -165,6 +165,13 @@ export default function SmartSearchBar({
return "Place / Tour / Wire";
}, []);
const handleClear = () => {
setQ("");
setItems([]);
setOpen(false);
onSearch && onSearch(""); // Clear filters
};
return (
<div className="sw-search" ref={boxRef}>
<div className="sw-search__bar">
@ -184,6 +191,20 @@ export default function SmartSearchBar({
aria-label="Search"
/>
{q && (
<button
type="button"
className="sw-search__clearBtn"
title="Clear search"
onClick={handleClear}
aria-label="Clear search"
>
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M18 6L6 18M6 6l12 12" />
</svg>
</button>
)}
<div className="sw-search__icons" aria-label="Search actions">
<button
type="button"

View File

@ -35,6 +35,27 @@
color: var(--sw-muted, rgba(255,255,255,0.55));
}
.sw-search__clearBtn {
border: 0;
outline: 0;
cursor: pointer;
background: transparent;
color: var(--sw-muted, rgba(255,255,255,0.60));
padding: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s ease;
}
.sw-search__clearBtn:hover {
color: var(--sw-text, rgba(255,255,255,0.92));
}
.sw-search__clearBtn:active {
transform: scale(0.95);
}
.sw-search__icons {
display: flex;
align-items: center;
@ -64,7 +85,7 @@
.sw-search__dropdown {
position: absolute;
z-index: 50;
z-index: 9999;
left: 0;
right: 0;
margin-top: 8px;