fix: handle resize on reopening chat

100mslive · May 20, 2024 · 9bce904 · 9bce904
1 parent 5bbc4bf
commit 9bce904
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx
@@ -109,6 +109,12 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
     }
   };
 
+  const updateInputHeight = () => {
+    if (inputRef.current) {
+      inputRef.current.style.height = `${Math.max(32, Math.min(inputRef.current.scrollHeight, 24 * 4))}px`;
+    }
+  };
+
   const sendMessage = useCallback(async () => {
     const message = inputRef?.current?.value;
     if (!message || !message.trim().length) {
@@ -139,6 +145,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
     const messageElement = inputRef.current;
     if (messageElement) {
       messageElement.value = draftMessage;
+      updateInputHeight();
     }
   }, [draftMessage]);
 
@@ -245,10 +252,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
               }}
               autoComplete="off"
               aria-autocomplete="none"
-              onChange={e => {
-                const element = e.target;
-                element.style.height = `${Math.min(element.scrollHeight, 24 * 4)}px`;
-              }}
+              onChange={updateInputHeight}
               onBlur={resetInputHeight}
               onPaste={e => e.stopPropagation()}
               onCut={e => e.stopPropagation()}