8563 workflow workflow node does not open on step click (#8582)

- fix multiple node selection
- fix console error
- fix close right drawer no unselect nodes
- fix edges not selectable
- fix sometime node not selected when clicking

## After


https://github.com/user-attachments/assets/ceec847f-5b7d-4452-9685-81a845bbf21e

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx

@@ -10,12 +10,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import { useRef } from 'react';
-import {
-  useRecoilCallback,
-  useRecoilState,
-  useRecoilValue,
-  useSetRecoilState,
-} from 'recoil';
+import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 import { isDefined } from '~/utils/isDefined';
 
@@ -24,8 +19,8 @@ import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
 import { RightDrawerHotkeyScope } from '../types/RightDrawerHotkeyScope';
 
-import { emitRightDrawerCloseEvent } from '@/ui/layout/right-drawer/utils/emitRightDrawerCloseEvent';
 import { RightDrawerRouter } from './RightDrawerRouter';
+import { workflowReactFlowRefState } from '@/workflow/states/workflowReactFlowRefState';
 
 const StyledContainer = styled(motion.div)<{ isRightDrawerMinimized: boolean }>`
   background: ${({ theme }) => theme.background.primary};
@@ -94,9 +89,7 @@ export const RightDrawer = () => {
 
   type RightDrawerAnimationVariant = keyof typeof animationVariants;
 
-  const [isRightDrawerOpen, setIsRightDrawerOpen] = useRecoilState(
-    isRightDrawerOpenState,
-  );
+  const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);
 
   const isRightDrawerMinimized = useRecoilValue(isRightDrawerMinimizedState);
 
@@ -109,13 +102,17 @@ export const RightDrawer = () => {
   const { closeRightDrawer } = useRightDrawer();
 
   const rightDrawerRef = useRef<HTMLDivElement>(null);
+  const workflowReactFlowRef = useRecoilValue(workflowReactFlowRefState);
 
   const { useListenClickOutside } = useClickOutsideListener(
     RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID,
   );
 
   useListenClickOutside({
-    refs: [rightDrawerRef],
+    refs: [
+      rightDrawerRef,
+      ...(workflowReactFlowRef ? [workflowReactFlowRef] : []),
+    ],
     callback: useRecoilCallback(
       ({ snapshot, set }) =>
         (event) => {
@@ -128,7 +125,6 @@ export const RightDrawer = () => {
 
           if (isRightDrawerOpen && !isRightDrawerMinimized) {
             set(rightDrawerCloseEventState, event);
-            emitRightDrawerCloseEvent();
 
             closeRightDrawer();
           }
@@ -141,10 +137,12 @@ export const RightDrawer = () => {
   useScopedHotkeys(
     [Key.Escape],
     () => {
-      closeRightDrawer();
+      if (isRightDrawerOpen && !isRightDrawerMinimized) {
+        closeRightDrawer();
+      }
     },
     RightDrawerHotkeyScope.RightDrawer,
-    [setIsRightDrawerOpen],
+    [isRightDrawerOpen, isRightDrawerMinimized],
   );
 
   const isMobile = useIsMobile();

packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useRightDrawer.ts

@@ -6,6 +6,7 @@ import { rightDrawerCloseEventState } from '@/ui/layout/right-drawer/states/righ
 import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
 import { RightDrawerPages } from '../types/RightDrawerPages';
+import { emitRightDrawerCloseEvent } from '@/ui/layout/right-drawer/utils/emitRightDrawerCloseEvent';
 
 export const useRightDrawer = () => {
   const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);
@@ -28,6 +29,7 @@ export const useRightDrawer = () => {
       () => {
         set(isRightDrawerOpenState, false);
         set(isRightDrawerMinimizedState, false);
+        emitRightDrawerCloseEvent();
       },
     [],
   );