From 9b9282e3d97d1f8d480f9816ce65548a56551763 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Fri, 15 Mar 2024 14:05:32 +0100
Subject: [PATCH] :bug: (editor) Fix multiple text editor focus

Closes #1312
---
 .../billing/components/PreCheckoutModal.tsx    |  1 -
 .../graph/components/nodes/block/BlockNode.tsx | 18 +++---------------
 2 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/apps/builder/src/features/billing/components/PreCheckoutModal.tsx b/apps/builder/src/features/billing/components/PreCheckoutModal.tsx
index 33cc0e4448..2ce472b007 100644
--- a/apps/builder/src/features/billing/components/PreCheckoutModal.tsx
+++ b/apps/builder/src/features/billing/components/PreCheckoutModal.tsx
@@ -152,7 +152,6 @@ export const PreCheckoutModal = ({
                 <Select
                   placeholder={t('billing.preCheckoutModal.taxId.placeholder')}
                   items={vatCodeLabels}
-                  isPopoverMatchingInputWidth={false}
                   onSelect={updateVatType}
                 />
                 <TextInput
diff --git a/apps/builder/src/features/graph/components/nodes/block/BlockNode.tsx b/apps/builder/src/features/graph/components/nodes/block/BlockNode.tsx
index 961b2b77ad..2f51aa79c6 100644
--- a/apps/builder/src/features/graph/components/nodes/block/BlockNode.tsx
+++ b/apps/builder/src/features/graph/components/nodes/block/BlockNode.tsx
@@ -79,12 +79,6 @@ export const BlockNode = ({
   const { mouseOverBlock, setMouseOverBlock } = useBlockDnd()
   const { typebot, updateBlock } = useTypebot()
   const [isConnecting, setIsConnecting] = useState(false)
-  const [isPopoverOpened, setIsPopoverOpened] = useState(
-    openedBlockId === block.id
-  )
-  const [isEditing, setIsEditing] = useState<boolean>(
-    isTextBubbleBlock(block) && (block.content?.richText?.length ?? 0) === 0
-  )
   const blockRef = useRef<HTMLDivElement | null>(null)
 
   const isPreviewing =
@@ -105,7 +99,7 @@ export const BlockNode = ({
     ref: blockRef,
     onDrag,
     isDisabled: !onMouseDown,
-    deps: [isEditing],
+    deps: [openedBlockId],
   })
 
   const {
@@ -153,13 +147,11 @@ export const BlockNode = ({
   const handleCloseEditor = (content: TElement[]) => {
     const updatedBlock = { ...block, content: { richText: content } }
     updateBlock(indices, updatedBlock)
-    setIsEditing(false)
   }
 
   const handleClick = (e: React.MouseEvent) => {
     setFocusedGroupId(groupId)
     e.stopPropagation()
-    if (isTextBubbleBlock(block) && !isReadOnly) setIsEditing(true)
     setOpenedBlockId(block.id)
   }
 
@@ -174,10 +166,6 @@ export const BlockNode = ({
   const handleContentChange = (content: BubbleBlockContent) =>
     updateBlock(indices, { ...block, content } as Block)
 
-  useEffect(() => {
-    setIsPopoverOpened(openedBlockId === block.id)
-  }, [block.id, openedBlockId])
-
   useEffect(() => {
     if (!blockRef.current) return
     const blockElement = blockRef.current
@@ -230,7 +218,7 @@ export const BlockNode = ({
     return edge.to.blockId === block.id
   })
 
-  return isEditing && isTextBubbleBlock(block) ? (
+  return openedBlockId === block.id && isTextBubbleBlock(block) ? (
     <TextBubbleEditor
       id={block.id}
       initialValue={block.content?.richText ?? []}
@@ -253,7 +241,7 @@ export const BlockNode = ({
         <Popover
           placement="left"
           isLazy
-          isOpen={isPopoverOpened}
+          isOpen={openedBlockId === block.id}
           closeOnBlur={false}
         >
           <PopoverTrigger>