diff --git a/src/components/Chat/ChatContent/Message/View/EditView.tsx b/src/components/Chat/ChatContent/Message/View/EditView.tsx index e0d9503e2..d4b28c8f8 100644 --- a/src/components/Chat/ChatContent/Message/View/EditView.tsx +++ b/src/components/Chat/ChatContent/Message/View/EditView.tsx @@ -14,7 +14,7 @@ const EditView = ({ content, setIsEdit, messageIndex, - sticky, + sticky }: { content: string; setIsEdit: React.Dispatch>; @@ -28,6 +28,7 @@ const EditView = ({ const [_content, _setContent] = useState(content); const [isModalOpen, setIsModalOpen] = useState(false); const textareaRef = React.createRef(); + const bufferRef = React.createRef(); const { t } = useTranslation(); @@ -105,18 +106,23 @@ const EditView = ({ handleSubmit(); }; - useEffect(() => { - if (textareaRef.current) { - textareaRef.current.style.height = 'auto'; - textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`; + const adjustTextareaHeight = () => { + if (textareaRef.current && bufferRef.current) { + const textarea = textareaRef.current; + const buffer = bufferRef.current; + + buffer.style.height = 'auto'; + buffer.style.height = buffer.scrollHeight + 'px'; + textarea.style.height = buffer.scrollHeight + 'px'; } + }; + + useEffect(() => { + adjustTextareaHeight(); }, [_content]); useEffect(() => { - if (textareaRef.current) { - textareaRef.current.style.height = 'auto'; - textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`; - } + adjustTextareaHeight(); }, []); return ( @@ -128,6 +134,7 @@ const EditView = ({ : '' }`} > +
+ +