From 3043193510bd078abafdbd3d5913abe5222ec51a Mon Sep 17 00:00:00 2001
From: Marvin Hagemeister <hello@marvinh.dev>
Date: Wed, 6 May 2026 10:45:18 +0200
Subject: [PATCH] fix: custom filter not removed + use popover

---
 src/adapter/adapter/filter.ts                 |  6 +-
 .../FilterPopup/FilterPopup.module.css        | 46 ++++++++++++-
 .../components/FilterPopup/FilterPopup.tsx    | 14 +++-
 src/view/components/IconBtn.tsx               |  2 +
 src/view/components/OutsideClick.tsx          | 33 ----------
 src/view/components/elements/TreeBar.tsx      | 65 +++++++++++--------
 .../components/TimelineBar/TimelineBar.tsx    | 27 +++-----
 src/view/store/filter.ts                      | 32 +++++++--
 test-e2e/tests/hoc-filter-disable.test.ts     | 56 ++++++++++++++++
 .../profiler/flamegraph/memo-sibling.test.ts  |  2 +-
 10 files changed, 195 insertions(+), 88 deletions(-)
 delete mode 100644 src/view/components/OutsideClick.tsx

diff --git a/src/adapter/adapter/filter.ts b/src/adapter/adapter/filter.ts
index 8da0b206..d2f56ba4 100644
--- a/src/adapter/adapter/filter.ts
+++ b/src/adapter/adapter/filter.ts
@@ -1,4 +1,8 @@
-import { RawFilter } from "../../view/store/filter";
+export interface RawFilter {
+	id?: number;
+	value: string;
+	enabled: boolean;
+}
 
 export interface RawFilterState {
 	regex: RawFilter[];
diff --git a/src/view/components/FilterPopup/FilterPopup.module.css b/src/view/components/FilterPopup/FilterPopup.module.css
index b3be93b8..0c81b134 100644
--- a/src/view/components/FilterPopup/FilterPopup.module.css
+++ b/src/view/components/FilterPopup/FilterPopup.module.css
@@ -3,20 +3,60 @@
 	display: flex;
 	height: 100%;
 	align-items: center;
+	anchor-name: --filter-popover-anchor;
 }
 
 .filter {
-	position: absolute;
-	top: 90%;
-	right: -0.5rem;
+	position: fixed;
+	inset: 2rem 0.75rem auto auto;
+	margin: 0;
 	border-top: none;
 	border: 0.0625rem solid var(--color-border);
 	background: var(--color-bg);
+	color: var(--color-text);
+	font-family: sans-serif;
+	font-size: 0.875rem;
 	width: 12rem;
 	z-index: 10;
 	padding: 0.5rem 0.5rem 0.5rem 0.75rem;
 }
 
+.filter:popover-open {
+	display: block;
+}
+
+.filterBtnWrapper:has(.filter:popover-open)
+	> :global(.icon-btn)
+	:global(.icon-btn-inner) {
+	position: relative;
+	z-index: 2;
+	color: var(--color-selected-text);
+}
+
+.filterBtnWrapper:has(.filter:popover-open)
+	> :global(.icon-btn)
+	:global(.icon-btn-bg) {
+	display: block;
+	content: "";
+	position: absolute;
+	left: -0.25rem;
+	top: -0.25rem;
+	right: -0.25rem;
+	bottom: -0.25rem;
+	background: var(--color-selected-bg);
+	border-radius: 0.2rem;
+}
+
+@supports (position-area: bottom) {
+	.filter {
+		position: fixed;
+		position-area: bottom span-left;
+		position-anchor: --filter-popover-anchor;
+		inset: auto;
+		margin-top: 0.25rem;
+	}
+}
+
 .filter form {
 	margin: 0;
 }
diff --git a/src/view/components/FilterPopup/FilterPopup.tsx b/src/view/components/FilterPopup/FilterPopup.tsx
index 113bc20e..417a5c81 100644
--- a/src/view/components/FilterPopup/FilterPopup.tsx
+++ b/src/view/components/FilterPopup/FilterPopup.tsx
@@ -74,14 +74,26 @@ export function FilterPopup({
 	onFiltersSubmit,
 	filterActions,
 	className,
+	id,
+	onOpen,
 }: {
 	children: ComponentChildren;
 	filterActions?: ComponentChildren;
 	onFiltersSubmit: () => void;
 	className?: string;
+	id: string;
+	onOpen?: () => void;
 }) {
 	return (
-		<div class={`${s.filter} ${className}`} data-testid="filter-popup">
+		<div
+			id={id}
+			popover="auto"
+			class={`${s.filter} ${className || ""}`}
+			data-testid="filter-popup"
+			onToggle={e => {
+				if ((e as any).newState === "open") onOpen?.();
+			}}
+		>
 			<form
 				onSubmit={e => {
 					e.preventDefault();
diff --git a/src/view/components/IconBtn.tsx b/src/view/components/IconBtn.tsx
index ccd33da2..50698735 100644
--- a/src/view/components/IconBtn.tsx
+++ b/src/view/components/IconBtn.tsx
@@ -7,6 +7,7 @@ export interface IconBtnProps {
 	disabled?: boolean;
 	color?: string;
 	onClick?: () => void;
+	popoverTarget?: string;
 	styling?: "secondary" | "primary";
 	children: ComponentChildren;
 	testId?: string;
@@ -22,6 +23,7 @@ export function IconBtn(props: IconBtnProps) {
 			title={props.title}
 			disabled={props.disabled}
 			data-testid={props.testId}
+			popovertarget={props.popoverTarget}
 			onClick={e => {
 				e.stopPropagation();
 				if (props.onClick) props.onClick();
diff --git a/src/view/components/OutsideClick.tsx b/src/view/components/OutsideClick.tsx
deleted file mode 100644
index f0990600..00000000
--- a/src/view/components/OutsideClick.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { h } from "preact";
-import { useEffect, useRef } from "preact/hooks";
-
-export interface Props {
-	onClick: () => void;
-	children: any;
-	class?: string;
-	style?: string | Record<string, any>;
-}
-
-export function OutsideClick(props: Props) {
-	const ref = useRef<HTMLDivElement>(null);
-
-	useEffect(() => {
-		if (!ref.current) return;
-
-		const listener = (e: MouseEvent) => {
-			if (ref.current && !ref.current.contains(e.target as any)) {
-				props.onClick();
-			}
-		};
-
-		const root = ref.current!.getRootNode() as HTMLElement;
-		root.addEventListener("click", listener);
-		return () => root.removeEventListener("click", listener);
-	}, [props.children, ref.current]);
-
-	return (
-		<div ref={ref} class={props.class} style={props.style}>
-			{props.children}
-		</div>
-	);
-}
diff --git a/src/view/components/elements/TreeBar.tsx b/src/view/components/elements/TreeBar.tsx
index 338c5101..32a8b0e0 100644
--- a/src/view/components/elements/TreeBar.tsx
+++ b/src/view/components/elements/TreeBar.tsx
@@ -6,7 +6,6 @@ import { Icon, Picker } from "../icons";
 import { useStore } from "../../store/react-bindings";
 import s from "./TreeBar.module.css";
 import { useSearch } from "../../store/search";
-import { OutsideClick } from "../OutsideClick";
 import { FilterCheck, FilterPopup } from "../FilterPopup/FilterPopup";
 import filterBarStyles from "../FilterPopup/FilterPopup.module.css";
 
@@ -15,8 +14,6 @@ export function TreeBar() {
 	const isPicking = store.isPicking.value;
 	const { value, count, selected, goPrev, goNext } = useSearch();
 
-	const [filterVisible, setFilterVisible] = useState(false);
-
 	const onKeyDown = (e: KeyboardEvent) => {
 		if (e.key === "Enter") {
 			e.preventDefault();
@@ -92,20 +89,16 @@ export function TreeBar() {
 			</div>
 			<ActionSeparator />
 			<div class={s.btnWrapper}>
-				<OutsideClick
-					onClick={() => setFilterVisible(false)}
-					class={filterBarStyles.filterBtnWrapper}
-				>
+				<div class={filterBarStyles.filterBtnWrapper}>
 					<IconBtn
 						title="Filter Components"
-						active={filterVisible}
 						testId="filter-menu-button"
-						onClick={() => setFilterVisible(!filterVisible)}
+						popoverTarget="tree-filter-popup"
 					>
 						<Icon icon="filter-list" />
 					</IconBtn>
-					{filterVisible && <TreeFilterPopup />}
-				</OutsideClick>
+					<TreeFilterPopup />
+				</div>
 			</div>
 		</Actions>
 	);
@@ -123,9 +116,24 @@ export function TreeFilterPopup() {
 		store.filter.filterTextSignal.value,
 	);
 	const [filters, setFilters] = useState(store.filter.filters.value);
+	const resetFilters = () => {
+		setFilterDom(store.filter.filterDom.value);
+		setFilterFragment(store.filter.filterFragment.value);
+		setFilterHoc(store.filter.filterHoc.value);
+		setFilterRoot(store.filter.filterRoot.value);
+		setFilterTextSignal(store.filter.filterTextSignal.value);
+		setFilters(store.filter.filters.value);
+	};
+	const removeFilter = (id: number) => {
+		const nextFilters = filters.filter(filter => filter.id !== id);
+		setFilters(nextFilters);
+		store.filter.filters.value = nextFilters;
+	};
 
 	return (
 		<FilterPopup
+			id="tree-filter-popup"
+			onOpen={resetFilters}
 			onFiltersSubmit={() => {
 				store.filter.filterDom.value = filterDom;
 				store.filter.filterFragment.value = filterFragment;
@@ -143,7 +151,10 @@ export function TreeFilterPopup() {
 					title="Add new filter"
 					testId="add-filter"
 					onClick={() =>
-						setFilters([...filters, { enabled: false, value: "" }])
+						setFilters([
+							...filters,
+							store.filter.createFilter({ enabled: false, value: "" }),
+						])
 					}
 				>
 					<span class={filterBarStyles.filterAdd}>
@@ -182,17 +193,20 @@ export function TreeFilterPopup() {
 				checked={filterTextSignal}
 			/>
 			{/* Custom user filters */}
-			{filters.map((x, i) => {
+			{filters.map(x => {
 				return (
-					<div key={i} class={filterBarStyles.filterRow}>
+					<div key={x.id} class={filterBarStyles.filterRow}>
 						<label class={filterBarStyles.filterCheck}>
 							<input
 								type="checkbox"
 								checked={x.enabled}
 								onInput={e => {
-									const copy = [...filters];
-									copy[i].enabled = (e.target as any).checked;
-									setFilters(copy);
+									const enabled = (e.target as any).checked;
+									setFilters(
+										filters.map(filter =>
+											filter.id === x.id ? { ...filter, enabled } : filter,
+										),
+									);
 								}}
 							/>
 							<Icon
@@ -206,9 +220,12 @@ export function TreeFilterPopup() {
 								placeholder="MyComponent"
 								value={x.value}
 								onInput={e => {
-									const copy = [...filters];
-									copy[i].value = (e.target as any).value;
-									setFilters(copy);
+									const value = (e.target as any).value;
+									setFilters(
+										filters.map(filter =>
+											filter.id === x.id ? { ...filter, value } : filter,
+										),
+									);
 								}}
 							/>
 						</span>
@@ -216,13 +233,9 @@ export function TreeFilterPopup() {
 							<IconBtn
 								title="Remove filter"
 								styling="secondary"
+								testId="remove-filter"
 								onClick={() => {
-									const idx = filters.indexOf(x);
-									if (idx > -1) {
-										const copy = [...filters];
-										copy.splice(idx, 1);
-										setFilters(copy);
-									}
+									removeFilter(x.id);
 								}}
 							>
 								<Icon icon="remove" />
diff --git a/src/view/components/profiler/components/TimelineBar/TimelineBar.tsx b/src/view/components/profiler/components/TimelineBar/TimelineBar.tsx
index b5c09005..0ec40bf1 100644
--- a/src/view/components/profiler/components/TimelineBar/TimelineBar.tsx
+++ b/src/view/components/profiler/components/TimelineBar/TimelineBar.tsx
@@ -14,7 +14,6 @@ import {
 } from "../../data/commits";
 import { Icon } from "../../../icons";
 import { useComputed } from "@preact/signals";
-import { OutsideClick } from "../../../OutsideClick";
 import { FilterNumber, FilterPopup } from "../../../FilterPopup/FilterPopup";
 import filterBarStyles from "../../../FilterPopup/FilterPopup.module.css";
 import s from "./TimelineBar.module.css";
@@ -27,8 +26,6 @@ export function TimelineBar() {
 	const isSupported = store.profiler.isSupported.value;
 	const selectedCommit = store.profiler.activeCommitIdx.value;
 
-	const [filterVisible, setFilterVisible] = useState(false);
-
 	const stats = useComputed(() => {
 		return {
 			max: Math.max(16, ...store.profiler.commits.value.map(x => x.duration)),
@@ -41,12 +38,8 @@ export function TimelineBar() {
 
 	const onCommitChange = useCallback(
 		(n: number) => {
-			const {
-				activeCommitIdx,
-				selectedNodeId,
-				activeCommit,
-				flamegraphType,
-			} = store.profiler;
+			const { activeCommitIdx, selectedNodeId, activeCommit, flamegraphType } =
+				store.profiler;
 
 			activeCommitIdx.value = n;
 			const commit = activeCommit.value;
@@ -117,20 +110,16 @@ export function TimelineBar() {
 				</span>
 			)}
 			{isSupported && !isRecording && commits.length !== 0 && (
-				<OutsideClick
-					onClick={() => setFilterVisible(false)}
-					class={filterBarStyles.filterBtnWrapper}
-				>
+				<div class={filterBarStyles.filterBtnWrapper}>
 					<IconBtn
 						title="Filter Commits"
-						active={filterVisible}
 						testId="filter-menu-button"
-						onClick={() => setFilterVisible(!filterVisible)}
+						popoverTarget="timeline-filter-popup"
 					>
 						<Icon icon="filter-list" />
 					</IconBtn>
-					{filterVisible && <TimelineFilterPopup />}
-				</OutsideClick>
+					<TimelineFilterPopup />
+				</div>
 			)}
 		</Actions>
 	);
@@ -144,7 +133,11 @@ export function TimelineFilterPopup() {
 
 	return (
 		<FilterPopup
+			id="timeline-filter-popup"
 			className={s.filterPopup}
+			onOpen={() =>
+				setFilterCommitsUnder(store.profiler.filterCommitsUnder.value)
+			}
 			onFiltersSubmit={() => {
 				store.profiler.filterCommitsUnder.value = filterCommitsUnder
 					? filterCommitsUnder
diff --git a/src/view/store/filter.ts b/src/view/store/filter.ts
index 24420c37..efa210d0 100644
--- a/src/view/store/filter.ts
+++ b/src/view/store/filter.ts
@@ -1,10 +1,25 @@
 import { signal } from "@preact/signals";
 import { escapeStringRegexp } from "./utils";
-import { RawFilterState } from "../../adapter/adapter/filter";
+import {
+	type RawFilter as StoredRawFilter,
+	RawFilterState,
+} from "../../adapter/adapter/filter";
 
-export interface RawFilter {
-	value: string;
-	enabled: boolean;
+export interface RawFilter extends StoredRawFilter {
+	id: number;
+}
+
+let nextFilterId = 0;
+
+function createFilter(filter: StoredRawFilter): RawFilter {
+	const id = filter.id ?? nextFilterId++;
+	nextFilterId = Math.max(nextFilterId, id + 1);
+
+	return {
+		id,
+		enabled: filter.enabled,
+		value: filter.value,
+	};
 }
 
 export function createFilterStore(
@@ -39,7 +54,11 @@ export function createFilterStore(
 		};
 
 		filters.value.forEach(x => {
-			s.regex.push({ value: escapeStringRegexp(x.value), enabled: x.enabled });
+			s.regex.push({
+				id: x.id,
+				value: escapeStringRegexp(x.value),
+				enabled: x.enabled,
+			});
 		});
 		onSubmit("update-filter", s);
 	};
@@ -52,7 +71,7 @@ export function createFilterStore(
 			filterRoot.value = !!state.type.root;
 			filterTextSignal.value =
 				"textSignal" in state.type ? !!state.type.textSignal : true;
-			filters.value = state.regex;
+			filters.value = state.regex.map(createFilter);
 
 			// Refetch component tree if filters are not the default ones
 			if (
@@ -78,6 +97,7 @@ export function createFilterStore(
 		filterHoc,
 		filterRoot,
 		filterTextSignal,
+		createFilter,
 		submit,
 		restore,
 	};
diff --git a/test-e2e/tests/hoc-filter-disable.test.ts b/test-e2e/tests/hoc-filter-disable.test.ts
index 751026ad..d02b55d2 100644
--- a/test-e2e/tests/hoc-filter-disable.test.ts
+++ b/test-e2e/tests/hoc-filter-disable.test.ts
@@ -10,6 +10,8 @@ test("HOC-Component filter should be disabled", async ({ page }) => {
 		'[data-testid="filter-popup"] label:has-text("HOC-Components")',
 	);
 	await devtools.click('[data-testid="filter-update"]');
+	await devtools.locator('[data-testid="element-search"]').click();
+	await expect(devtools.locator('[data-testid="filter-popup"]')).toBeHidden();
 
 	await devtools.waitForSelector(locateTreeItem("Memo(Foo)"));
 
@@ -33,3 +35,57 @@ test("HOC-Component filter should be disabled", async ({ page }) => {
 
 	await expect(devtools.locator('[data-testid="hoc-panel"]')).toHaveCount(0);
 });
+
+test("Custom filter should stay removed after submitting", async ({ page }) => {
+	const { devtools } = await gotoTest(page, "hoc");
+	const filterPopup = devtools.locator('[data-testid="filter-popup"]');
+	const customFilters = filterPopup.locator('input[type="text"]');
+
+	await devtools.click('[data-testid="filter-menu-button"]');
+	await filterPopup.waitFor();
+
+	await devtools.locator('[data-testid="add-filter"]').click();
+	await expect(customFilters).toHaveCount(1);
+	await customFilters.first().fill("Foo");
+	await devtools.click('[data-testid="filter-update"]');
+
+	await devtools.locator('[data-testid="element-search"]').click();
+	await expect(filterPopup).toBeHidden();
+
+	await devtools.click('[data-testid="filter-menu-button"]');
+	await expect(customFilters).toHaveValue("Foo");
+
+	await devtools.locator('[data-testid="remove-filter"]').click();
+	await expect(customFilters).toHaveCount(0);
+	await devtools.click('[data-testid="filter-update"]');
+
+	await devtools.locator('[data-testid="element-search"]').click();
+	await expect(filterPopup).toBeHidden();
+
+	await devtools.click('[data-testid="filter-menu-button"]');
+	await expect(customFilters).toHaveCount(0);
+});
+
+test("Custom filter should stay removed after closing without submit", async ({
+	page,
+}) => {
+	const { devtools } = await gotoTest(page, "hoc");
+	const filterPopup = devtools.locator('[data-testid="filter-popup"]');
+	const customFilters = filterPopup.locator('input[type="text"]');
+
+	await devtools.click('[data-testid="filter-menu-button"]');
+	await filterPopup.waitFor();
+
+	await devtools.locator('[data-testid="add-filter"]').click();
+	await customFilters.first().fill("Foo");
+	await devtools.click('[data-testid="filter-update"]');
+
+	await devtools.locator('[data-testid="remove-filter"]').click();
+	await expect(customFilters).toHaveCount(0);
+
+	await devtools.locator('[data-testid="element-search"]').click();
+	await expect(filterPopup).toBeHidden();
+
+	await devtools.click('[data-testid="filter-menu-button"]');
+	await expect(customFilters).toHaveCount(0);
+});
diff --git a/test-e2e/tests/profiler/flamegraph/memo-sibling.test.ts b/test-e2e/tests/profiler/flamegraph/memo-sibling.test.ts
index 48ab30d1..3a9a90bc 100644
--- a/test-e2e/tests/profiler/flamegraph/memo-sibling.test.ts
+++ b/test-e2e/tests/profiler/flamegraph/memo-sibling.test.ts
@@ -21,7 +21,7 @@ test("Correctly position memoized sibling sub-trees", async ({ page }) => {
 	await devtools.locator('[data-testid="filter-update"]').click();
 	await devtools.locator('[data-testid="filter-menu-button"]').click();
 
-	await expect(devtools.locator('[data-testid="filter-popup"]')).toHaveCount(0);
+	await expect(devtools.locator('[data-testid="filter-popup"]')).toBeHidden();
 
 	await devtools.locator(locateTab("PROFILER")).click();