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";
|
return "Place / Tour / Wire";
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const handleClear = () => {
|
||||||
|
setQ("");
|
||||||
|
setItems([]);
|
||||||
|
setOpen(false);
|
||||||
|
onSearch && onSearch(""); // Clear filters
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="sw-search" ref={boxRef}>
|
<div className="sw-search" ref={boxRef}>
|
||||||
<div className="sw-search__bar">
|
<div className="sw-search__bar">
|
||||||
|
|
@ -184,6 +191,20 @@ export default function SmartSearchBar({
|
||||||
aria-label="Search"
|
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">
|
<div className="sw-search__icons" aria-label="Search actions">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|
|
||||||
|
|
@ -35,6 +35,27 @@
|
||||||
color: var(--sw-muted, rgba(255,255,255,0.55));
|
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 {
|
.sw-search__icons {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -64,7 +85,7 @@
|
||||||
|
|
||||||
.sw-search__dropdown {
|
.sw-search__dropdown {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 50;
|
z-index: 9999;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue