From 3f098a6364c85a2b554ba0c46ee6a8157c6d2d01 Mon Sep 17 00:00:00 2001
From: ivoryoung <415849035@qq.com>
Date: Mon, 10 Jun 2024 16:47:03 +0800
Subject: [PATCH] (fix)(chat-sdk) Fixing the abnormal width issue of the
 auto-complete component's selection panel (#1111)

---
 .../chat-sdk/src/Chat/ChatFooter/index.tsx    | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/webapp/packages/chat-sdk/src/Chat/ChatFooter/index.tsx b/webapp/packages/chat-sdk/src/Chat/ChatFooter/index.tsx
index dff2ece7e..54a313c61 100644
--- a/webapp/packages/chat-sdk/src/Chat/ChatFooter/index.tsx
+++ b/webapp/packages/chat-sdk/src/Chat/ChatFooter/index.tsx
@@ -293,6 +293,30 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
     );
   });
 
+  const fixWidthBug = () => {
+    setTimeout(() => {
+      const dropdownDom = document.querySelector( '.' + styles.autoCompleteDropdown + ' .rc-virtual-list-holder-inner')
+
+      if (!dropdownDom) {
+        fixWidthBug()
+      }else{
+        // 获取popoverDom样式
+        const popoverDomStyle = window.getComputedStyle(dropdownDom)
+        // 在获取popoverDom中增加样式 width: fit-content
+        dropdownDom.setAttribute('style', `${popoverDomStyle.cssText};width: fit-content`)
+        // 获取popoverDom的宽度
+        const popoverDomWidth = dropdownDom.clientWidth
+        // 将popoverDom的宽度赋值给他的父元素
+        const offset = 20 // 预增加20px的宽度，预留空间给虚拟渲染出来的元素
+        dropdownDom.parentElement!.style.width = popoverDomWidth + offset + 'px'
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (modelOptionNodes.length || associateOptionNodes.length) fixWidthBug()
+  }, [modelOptionNodes.length, associateOptionNodes.length]);
+
   return (
     <div className={chatFooterClass}>
       <div className={styles.tools}>