diff --git a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx b/packages/ui/src/components/Visualization/Canvas/Canvas.tsx
index 5dc6ccdf2..110897058 100644
--- a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx
+++ b/packages/ui/src/components/Visualization/Canvas/Canvas.tsx
@@ -190,6 +190,16 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({ enti
     setSelectedNode(undefined);
   }, []);
 
+  const handleCanvasClick = useCallback(
+    (event: React.MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (target.tagName === 'rect') {
+        handleCloseSideBar();
+      }
+    },
+    [handleCloseSideBar],
+  );
+
   const isSidebarOpen = useMemo(() => selectedNode !== undefined, [selectedNode]);
 
   return (
@@ -203,6 +213,7 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({ enti
       sideBar={<CanvasSideBar selectedNode={selectedNode} onClose={handleCloseSideBar} />}
       contextToolbar={contextToolbar}
       controlBar={<TopologyControlBar controlButtons={controlButtons} />}
+      onClick={handleCanvasClick}
     >
       <VisualizationSurface state={{ selectedIds }} />