Merge pull request #18968 from Scroody/fix-chat-input-focus

Client: Focus on input when clicking chat
bigbluebutton · Oct 23, 2023 · fc18772 · fc18772
2 parents 81a8b15 + 5952fae
commit fc18772
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
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
@@ -294,6 +294,16 @@ const ChatMessageForm: React.FC<ChatMessageFormProps> = ({
       }
     };
 
+    document.addEventListener('click', (event) => {
+      const chatList = document.getElementById('chat-list');
+      if (chatList?.contains(event.target as Node)) {
+        const selection = window.getSelection()?.toString();
+        if (selection?.length === 0) {
+          textAreaRef.current?.textarea.focus();
+        }
+      }
+    });
+
     if (sendGroupChatMsgError) { return <div>something went wrong</div>; }
 
     return (

diff --git a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/component.tsx b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/component.tsx
@@ -245,7 +245,7 @@ const ChatMessageList: React.FC<ChatListProps> = ({
     <>
       {
         [
-          <MessageListWrapper key="message-list-wrapper">
+          <MessageListWrapper key="message-list-wrapper" id="chat-list">
             <MessageList
               ref={messageListRef}
               onWheel={(e) => {