fix(editor): ♿️ Improve block focus

apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx

@@ -30,6 +30,8 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
     blocksCoordinates,
     updateBlockCoordinates,
     isReadOnly,
+    focusedBlockId,
+    setFocusedBlockId,
   } = useGraph()
   const { typebot, updateBlock } = useTypebot()
   const { setMouseOverBlock, mouseOverBlock } = useStepDnd()
@@ -91,7 +93,10 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
     })
   }
 
-  const onDragStart = () => setIsMouseDown(true)
+  const onDragStart = () => {
+    setFocusedBlockId(block.id)
+    setIsMouseDown(true)
+  }
   const onDragStop = () => setIsMouseDown(false)
   return (
     <ContextMenu<HTMLDivElement>
@@ -131,6 +136,7 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
             cursor={isMouseDown ? 'grabbing' : 'pointer'}
             boxShadow="0px 0px 0px 1px #e9edf3;"
             _hover={{ shadow: 'lg' }}
+            zIndex={focusedBlockId === block.id ? 10 : 1}
           >
             <Editable
               defaultValue={block.title}

apps/builder/components/shared/Graph/Nodes/StepNode/StepNode.tsx

@@ -45,8 +45,13 @@ export const StepNode = ({
   onMouseDown?: (stepNodePosition: NodePosition, step: DraggableStep) => void
 }) => {
   const { query } = useRouter()
-  const { setConnectingIds, connectingIds, openedStepId, setOpenedStepId } =
+  const {
-    useGraph()
+    setConnectingIds,
+    connectingIds,
+    openedStepId,
+    setOpenedStepId,
+    setFocusedBlockId,
+  } = useGraph()
   const { updateStep } = useTypebot()
   const [isConnecting, setIsConnecting] = useState(false)
   const [isPopoverOpened, setIsPopoverOpened] = useState(
@@ -113,6 +118,7 @@ export const StepNode = ({
   }
 
   const handleClick = (e: React.MouseEvent) => {
+    setFocusedBlockId(step.blockId)
     e.stopPropagation()
     if (isTextBubbleStep(step)) setIsEditing(true)
     setOpenedStepId(step.id)

apps/builder/components/shared/VariableSearchInput.tsx

@@ -75,6 +75,7 @@ export const VariableSearchInput = ({
     debounced(e.target.value)
     onOpen()
     if (e.target.value === '') {
+      onSelectVariable(undefined)
       setFilteredItems([...variables.slice(0, 50)])
       return
     }

apps/builder/contexts/GraphContext.tsx

@@ -73,6 +73,8 @@ const graphContext = createContext<{
   openedStepId?: string
   setOpenedStepId: Dispatch<SetStateAction<string | undefined>>
   isReadOnly: boolean
+  focusedBlockId?: string
+  setFocusedBlockId: Dispatch<SetStateAction<string | undefined>>
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //@ts-ignore
 }>({
@@ -98,6 +100,8 @@ export const GraphProvider = ({
   const [blocksCoordinates, setBlocksCoordinates] = useState<BlocksCoordinates>(
     {}
   )
+  const [focusedBlockId, setFocusedBlockId] = useState<string>()
+
   useEffect(() => {
     setBlocksCoordinates(
       blocks.reduce(
@@ -149,6 +153,8 @@ export const GraphProvider = ({
         blocksCoordinates,
         updateBlockCoordinates,
         isReadOnly,
+        focusedBlockId,
+        setFocusedBlockId,
       }}
     >
       {children}