chore: fix onClose of filters side panel

SigNoz · Jan 29, 2025 · 69743a5 · 69743a5
1 parent 4ed73dc
commit 69743a5
Showing 1 changed file with 19 additions and 0 deletions.
diff --git a/frontend/src/container/InfraMonitoringK8s/K8sFiltersSidePanel/K8sFiltersSidePanel.tsx b/frontend/src/container/InfraMonitoringK8s/K8sFiltersSidePanel/K8sFiltersSidePanel.tsx
@@ -37,6 +37,25 @@ function K8sFiltersSidePanel({
 		}
 	}, [searchValue]);
 
+	// Close side panel when clicking outside of it
+	useEffect(() => {
+		const handleClickOutside = (event: MouseEvent) => {
+			if (
+				sidePanelRef.current &&
+				!sidePanelRef.current.contains(event.target as Node)
+			) {
+				onClose();
+			}
+		};
+
+		document.addEventListener('mousedown', handleClickOutside);
+
+		return () => {
+			document.removeEventListener('mousedown', handleClickOutside);
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	return (
 		<div className="k8s-filters-side-panel-container">
 			<div className="k8s-filters-side-panel" ref={sidePanelRef}>