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/workflow/components/WorkflowDiagramCanvasBase.tsx

@@ -28,6 +28,8 @@ import '@xyflow/react/dist/style.css';
 import React, { useEffect, useMemo, useRef } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { GRAY_SCALE, isDefined, THEME_COMMON } from 'twenty-ui';
+import { useListenRightDrawerClose } from '@/ui/layout/right-drawer/hooks/useListenRightDrawerClose';
+import { workflowReactFlowRefState } from '@/workflow/states/workflowReactFlowRefState';
 
 const StyledResetReactflowStyles = styled.div`
   height: 100%;
@@ -86,6 +88,9 @@ export const WorkflowDiagramCanvasBase = ({
   children?: React.ReactNode;
 }) => {
   const reactflow = useReactFlow();
+  const setWorkflowReactFlowRefState = useSetRecoilState(
+    workflowReactFlowRefState,
+  );
 
   const { nodes, edges } = useMemo(
     () => getOrganizedDiagram(diagram),
@@ -144,6 +149,12 @@ export const WorkflowDiagramCanvasBase = ({
     });
   };
 
+  useListenRightDrawerClose(() => {
+    reactflow.setNodes((nodes) =>
+      nodes.map((node) => ({ ...node, selected: false })),
+    );
+  });
+
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -176,6 +187,11 @@ export const WorkflowDiagramCanvasBase = ({
   return (
     <StyledResetReactflowStyles ref={containerRef}>
       <ReactFlow
+        ref={(node) => {
+          if (isDefined(node)) {
+            setWorkflowReactFlowRefState({ current: node });
+          }
+        }}
         onInit={() => {
           if (!isDefined(containerRef.current)) {
             throw new Error('Expect the container ref to be defined');
@@ -192,11 +208,16 @@ export const WorkflowDiagramCanvasBase = ({
         minZoom={defaultFitViewOptions.minZoom}
         maxZoom={defaultFitViewOptions.maxZoom}
         nodeTypes={nodeTypes}
-        nodes={nodes.map((node) => ({ ...node, draggable: false }))}
+        nodes={nodes}
         edges={edges}
         onNodesChange={handleNodesChange}
         onEdgesChange={handleEdgesChange}
         proOptions={{ hideAttribution: true }}
+        multiSelectionKeyCode={null}
+        nodesFocusable={false}
+        edgesFocusable={false}
+        nodesDraggable={false}
+        paneClickDistance={10} // Fix small unwanted user dragging does not select node
       >
         <Background color={GRAY_SCALE.gray25} size={2} />
 

packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormServerlessFunction.tsx

@@ -1,3 +1,5 @@
+import { ReactNode, Fragment } from 'react';
+import styled from '@emotion/styled';
 import { useGetManyServerlessFunctions } from '@/settings/serverless-functions/hooks/useGetManyServerlessFunctions';
 import { Select, SelectOption } from '@/ui/input/components/Select';
 import { WorkflowEditGenericFormBase } from '@/workflow/components/WorkflowEditGenericFormBase';
@@ -8,8 +10,6 @@ import { getDefaultFunctionInputFromInputSchema } from '@/workflow/utils/getDefa
 import { mergeDefaultFunctionInputAndFunctionInput } from '@/workflow/utils/mergeDefaultFunctionInputAndFunctionInput';
 import { setNestedValue } from '@/workflow/utils/setNestedValue';
 import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { ReactNode } from 'react';
 import { HorizontalSeparator, IconCode, isDefined } from 'twenty-ui';
 import { useDebouncedCallback } from 'use-debounce';
 
@@ -165,12 +165,12 @@ export const WorkflowEditActionFormServerlessFunction = ({
       if (inputValue !== null && typeof inputValue === 'object') {
         if (isRoot) {
           return (
-            <>
+            <Fragment key={pathKey}>
               {displaySeparator(functionInput) && (
                 <HorizontalSeparator noMargin />
               )}
               {renderFields(inputValue, currentPath, false)}
-            </>
+            </Fragment>
           );
         }
         return (