From 8d8c36fc5972fc6173ac9e6357c14eab84a65bfc Mon Sep 17 00:00:00 2001
From: likiosliu <likiosliu@gmail.com>
Date: Wed, 25 Mar 2026 10:32:11 +0800
Subject: [PATCH] fix: use stable references for event listeners in Spotlight
 component

Anonymous arrow functions create different references on add/remove,
so the listeners were never actually removed.

Closes #933
---
 surfsense_web/components/ui/spotlight.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/surfsense_web/components/ui/spotlight.tsx b/surfsense_web/components/ui/spotlight.tsx
index 2258e8814..3047559e1 100644
--- a/surfsense_web/components/ui/spotlight.tsx
+++ b/surfsense_web/components/ui/spotlight.tsx
@@ -48,14 +48,17 @@ export function Spotlight({
 	useEffect(() => {
 		if (!parentElement) return;
 
+		const handleEnter = () => setIsHovered(true);
+		const handleLeave = () => setIsHovered(false);
+
 		parentElement.addEventListener("mousemove", handleMouseMove);
-		parentElement.addEventListener("mouseenter", () => setIsHovered(true));
-		parentElement.addEventListener("mouseleave", () => setIsHovered(false));
+		parentElement.addEventListener("mouseenter", handleEnter);
+		parentElement.addEventListener("mouseleave", handleLeave);
 
 		return () => {
 			parentElement.removeEventListener("mousemove", handleMouseMove);
-			parentElement.removeEventListener("mouseenter", () => setIsHovered(true));
-			parentElement.removeEventListener("mouseleave", () => setIsHovered(false));
+			parentElement.removeEventListener("mouseenter", handleEnter);
+			parentElement.removeEventListener("mouseleave", handleLeave);
 		};
 	}, [parentElement, handleMouseMove]);