From 19bf4dbded69045b038c2f975135ddf99805d15c Mon Sep 17 00:00:00 2001
From: Kwanghyun On <kwanghyun.on@gmail.com>
Date: Fri, 1 Nov 2024 13:29:27 +0900
Subject: [PATCH] Fix popover positioning bug

---
 .../template/CreateTemplatePopoverPlugin.tsx  | 35 +++++++------------
 1 file changed, 12 insertions(+), 23 deletions(-)

diff --git a/src/components/chat-view/chat-input/plugins/template/CreateTemplatePopoverPlugin.tsx b/src/components/chat-view/chat-input/plugins/template/CreateTemplatePopoverPlugin.tsx
index 389d0dd..fc5f405 100644
--- a/src/components/chat-view/chat-input/plugins/template/CreateTemplatePopoverPlugin.tsx
+++ b/src/components/chat-view/chat-input/plugins/template/CreateTemplatePopoverPlugin.tsx
@@ -17,7 +17,6 @@ export default function CreateTemplatePopoverPlugin({
   const [editor] = useLexicalComposerContext()
 
   const [popoverStyle, setPopoverStyle] = useState<CSSProperties | null>(null)
-  const [popoverWidth, setPopoverWidth] = useState(0)
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
   const [isDialogOpen, setIsDialogOpen] = useState(false)
 
@@ -38,10 +37,6 @@ export default function CreateTemplatePopoverPlugin({
   }, [editor])
 
   const updatePopoverPosition = useCallback(() => {
-    if (popoverRef.current) {
-      setPopoverWidth(popoverRef.current.offsetWidth)
-    }
-
     if (!anchorElement || !contentEditableElement) return
     const nativeSelection = document.getSelection()
     const range = nativeSelection?.getRangeAt(0)
@@ -62,7 +57,7 @@ export default function CreateTemplatePopoverPlugin({
     const idealLeft = rects[rects.length - 1].right - anchorRect.left
     const paddingX = 8
     const paddingY = 4
-    const minLeft = popoverWidth + paddingX
+    const minLeft = (popoverRef.current?.offsetWidth ?? 0) + paddingX
     const finalLeft = Math.max(minLeft, idealLeft)
     setPopoverStyle({
       top: rects[rects.length - 1].bottom - anchorRect.top + paddingY,
@@ -76,12 +71,7 @@ export default function CreateTemplatePopoverPlugin({
       return
     }
     setIsPopoverOpen(true)
-  }, [
-    anchorElement,
-    contentEditableElement,
-    getSelectedSerializedNodes,
-    popoverWidth,
-  ])
+  }, [anchorElement, contentEditableElement, getSelectedSerializedNodes])
 
   useEffect(() => {
     const handleSelectionChange = () => {
@@ -120,17 +110,16 @@ export default function CreateTemplatePopoverPlugin({
       onOpenChange={setIsDialogOpen}
     >
       <Dialog.Trigger asChild>
-        {isPopoverOpen ? (
-          <button
-            ref={popoverRef}
-            style={{
-              position: 'absolute',
-              ...popoverStyle,
-            }}
-          >
-            Create template
-          </button>
-        ) : null}
+        <button
+          ref={popoverRef}
+          style={{
+            position: 'absolute',
+            visibility: isPopoverOpen ? 'visible' : 'hidden',
+            ...popoverStyle,
+          }}
+        >
+          Create template
+        </button>
       </Dialog.Trigger>
       <CreateTemplateDialogContent
         selectedSerializedNodes={getSelectedSerializedNodes()}