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:
parent
797859ac80
commit
b013a71ea6
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue