From 261cd9a5c7d239e3317d2ffbde29ff218b2ff25c Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Tue, 29 Mar 2022 10:23:45 +0200
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E2=99=BF=EF=B8=8F=20Improve=20b?=
 =?UTF-8?q?lock=20focus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/Graph/Nodes/BlockNode/BlockNode.tsx         |  8 +++++++-
 .../shared/Graph/Nodes/StepNode/StepNode.tsx           | 10 ++++++++--
 apps/builder/components/shared/VariableSearchInput.tsx |  1 +
 apps/builder/contexts/GraphContext.tsx                 |  6 ++++++
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx b/apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx
index d1d54b97e..6f297b752 100644
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx
+++ b/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}
diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNode.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNode.tsx
index af41fd1f5..a115dc0df 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNode.tsx
+++ b/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 } =
-    useGraph()
+  const {
+    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)
diff --git a/apps/builder/components/shared/VariableSearchInput.tsx b/apps/builder/components/shared/VariableSearchInput.tsx
index 10c69b514..5dfc9a068 100644
--- a/apps/builder/components/shared/VariableSearchInput.tsx
+++ b/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
     }
diff --git a/apps/builder/contexts/GraphContext.tsx b/apps/builder/contexts/GraphContext.tsx
index 1e2b38abb..641336b3e 100644
--- a/apps/builder/contexts/GraphContext.tsx
+++ b/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}