diff --git a/apps/fabro-web/app/components/event-debug.tsx b/apps/fabro-web/app/components/event-debug.tsx
index 67d43eaba..717360c08 100644
--- a/apps/fabro-web/app/components/event-debug.tsx
+++ b/apps/fabro-web/app/components/event-debug.tsx
@@ -321,10 +321,19 @@ export function EventSearchInput({
value: string;
onChange: (value: string) => void;
}) {
+ const [focused, setFocused] = useState(false);
+ const expanded = focused || value.length > 0;
+
return (
-
+
onChange(e.target.value)}
- className="block w-full rounded-md bg-panel py-1.5 pl-8 pr-2.5 text-xs text-fg outline-1 -outline-offset-1 outline-line-strong placeholder:text-fg-muted focus:outline-2 focus:-outline-offset-1 focus:outline-teal-500 max-sm:text-base/5"
+ onFocus={() => setFocused(true)}
+ onBlur={() => setFocused(false)}
+ onKeyDown={(e) => {
+ if (e.key === "Escape") {
+ onChange("");
+ e.currentTarget.blur();
+ }
+ }}
+ className="block w-full cursor-pointer bg-transparent py-1.5 pl-8 pr-2.5 text-xs text-fg placeholder:text-fg-muted focus:cursor-text focus:outline-none max-sm:text-base/5"
/>
);