From 69743a5f14ed65664e372a0b7dc233c075cb01e4 Mon Sep 17 00:00:00 2001
From: amlannandy <amlannandy5@gmail.com>
Date: Wed, 29 Jan 2025 23:50:45 +0530
Subject: [PATCH] chore: fix onClose of filters side panel

---
 .../K8sFiltersSidePanel.tsx                   | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/frontend/src/container/InfraMonitoringK8s/K8sFiltersSidePanel/K8sFiltersSidePanel.tsx b/frontend/src/container/InfraMonitoringK8s/K8sFiltersSidePanel/K8sFiltersSidePanel.tsx
index d042144b43..081f343043 100644
--- 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}>