From 4950470ff0189291125c13569e23e4a6cab96740 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Victor?= <joaovictornunes973@gmail.com>
Date: Thu, 25 Jan 2024 11:37:14 -0300
Subject: [PATCH] fix(chat): properly restore text input focus after a message
 is sent

---
 .../chat-message-form/component.tsx           | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-form/component.tsx b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-form/component.tsx
index e5f3411f9a..089701cb1e 100644
--- a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-form/component.tsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-form/component.tsx
@@ -134,6 +134,7 @@ const ChatMessageForm: React.FC<ChatMessageFormProps> = ({
   const [error, setError] = React.useState<string | null>(null);
   const [message, setMessage] = React.useState('');
   const [showEmojiPicker, setShowEmojiPicker] = React.useState(false);
+  const [isTextAreaFocused, setIsTextAreaFocused] = React.useState(false);
   const textAreaRef: RefObject<TextareaAutosize> = useRef<TextareaAutosize>(null);
   const { isMobile } = deviceInfo;
   const prevChatId = usePreviousValue(chatId);
@@ -148,6 +149,10 @@ const ChatMessageForm: React.FC<ChatMessageFormProps> = ({
 
   const [chatSetTyping] = useMutation(CHAT_SET_TYPING);
 
+  const [chatSendMessage, {
+    loading: chatSendMessageLoading, error: chatSendMessageError,
+  }] = useMutation(CHAT_SEND_MESSAGE);
+
   const handleUserTyping = throttle(
     (hasError?: boolean) => {
       if (hasError || !ENABLE_TYPING_INDICATOR) return;
@@ -196,6 +201,17 @@ const ChatMessageForm: React.FC<ChatMessageFormProps> = ({
     setMessageHint();
   }, [connected, locked, partnerIsLoggedOut]);
 
+  useEffect(() => {
+    const shouldRestoreFocus = textAreaRef.current
+      && !chatSendMessageLoading
+      && isTextAreaFocused
+      && document.activeElement !== textAreaRef.current.textarea;
+
+    if (shouldRestoreFocus) {
+      textAreaRef.current.textarea.focus();
+    }
+  }, [chatSendMessageLoading, textAreaRef.current]);
+
   const setMessageHint = () => {
     let chatDisabledHint = null;
 
@@ -258,10 +274,6 @@ const ChatMessageForm: React.FC<ChatMessageFormProps> = ({
   const renderForm = () => {
     const formRef = useRef<HTMLFormElement | null>(null);
 
-    const [chatSendMessage, {
-      loading: chatSendMessageLoading, error: chatSendMessageError,
-    }] = useMutation(CHAT_SEND_MESSAGE);
-
     const handleSubmit = (e: React.FormEvent<HTMLFormElement> | React.KeyboardEvent<HTMLInputElement> | Event) => {
       e.preventDefault();
 
@@ -295,10 +307,6 @@ const ChatMessageForm: React.FC<ChatMessageFormProps> = ({
       setShowEmojiPicker(false);
       const sentMessageEvent = new CustomEvent(ChatEvents.SENT_MESSAGE);
       window.dispatchEvent(sentMessageEvent);
-
-      setTimeout(() => {
-        textAreaRef.current?.textarea.focus();
-      }, 100);
     };
 
     const handleMessageKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
@@ -364,9 +372,11 @@ const ChatMessageForm: React.FC<ChatMessageFormProps> = ({
             value={message}
             onFocus={() => {
               window.dispatchEvent(new CustomEvent(PluginSdk.ChatFormEventsNames.CHAT_INPUT_FOCUSED));
+              setIsTextAreaFocused(true);
             }}
             onBlur={() => {
               window.dispatchEvent(new CustomEvent(PluginSdk.ChatFormEventsNames.CHAT_INPUT_UNFOCUSED));
+              setIsTextAreaFocused(false);
             }}
             onChange={handleMessageChange}
             onKeyDown={handleMessageKeyDown}