Fix lost focus for chat input

src/components/chat-view-container/chat-view-container.test.tsx

@@ -20,6 +20,7 @@ describe('ChannelViewContainer', () => {
         isLoading: false,
         data: null,
       },
+      activeMessengerId: '',
       sendMessage: () => undefined,
       uploadFileMessage: () => undefined,
       fetchUsers: () => undefined,
@@ -409,6 +410,38 @@ describe('ChannelViewContainer', () => {
     expect(textareaRef.current.focus).toHaveBeenCalled();
   });
 
+  it('should not call focus on message input render if activeMessengerId not equal the id of textareaRef', () => {
+    const activeMessengerId = '1';
+    const textareaRef = {
+      current: {
+        focus: jest.fn(),
+        id: '3',
+      },
+    };
+
+    const wrapper = subject({ activeMessengerId });
+
+    (wrapper.instance() as any).onMessageInputRendered(textareaRef);
+
+    expect(textareaRef.current.focus).not.toHaveBeenCalled();
+  });
+
+  it('should call focus on message input render if activeMessengerId equal the id of textareaRef', () => {
+    const activeMessengerId = '1';
+    const textareaRef = {
+      current: {
+        focus: jest.fn(),
+        id: activeMessengerId,
+      },
+    };
+
+    const wrapper = subject({ activeMessengerId });
+
+    (wrapper.instance() as any).onMessageInputRendered(textareaRef);
+
+    expect(textareaRef.current.focus).toHaveBeenCalled();
+  });
+
   describe('mapState', () => {
     const getState = (state: any) =>
       ({
@@ -421,6 +454,9 @@ describe('ChannelViewContainer', () => {
             data: null,
           },
         },
+        chat: {
+          activeMessengerId: '1',
+        },
       } as RootState);
 
     test('channel', () => {

src/components/chat-view-container/chat-view-container.tsx

@@ -49,6 +49,7 @@ export interface Properties extends PublicProperties {
   markAllMessagesAsReadInChannel: (payload: MarkAsReadPayload) => void;
   startMessageSync: (payload: PayloadFetchMessages) => void;
   stopSyncChannels: (payload: PayloadFetchMessages) => void;
+  activeMessengerId?: string;
   context: {
     isAuthenticated: boolean;
   };
@@ -70,11 +71,13 @@ export class Container extends React.Component<Properties, State> {
     const channel = denormalize(props.channelId, state) || null;
     const {
       authentication: { user },
+      chat: { activeMessengerId },
     } = state;
 
     return {
       channel,
       user,
+      activeMessengerId,
     };
   }
 
@@ -245,7 +248,12 @@ export class Container extends React.Component<Properties, State> {
 
   onMessageInputRendered = (textareaRef: RefObject<HTMLTextAreaElement>) => {
     if (textareaRef && textareaRef.current) {
-      textareaRef.current.focus();
+      if (
+        (this.props.activeMessengerId && this.props.activeMessengerId === textareaRef.current.id) ||
+        !this.props.activeMessengerId
+      ) {
+        textareaRef.current.focus();
+      }
     }
   };
 

src/components/chat-view-container/chat-view.tsx

@@ -214,6 +214,7 @@ export class ChatView extends React.Component<Properties, State> {
           {isMemberOfChannel && (
             <MessageInput
               onMessageInputRendered={this.props.onMessageInputRendered}
+              id={this.props.id}
               onSubmit={this.props.sendMessage}
               getUsersForMentions={this.searchMentionableUsers}
               reply={this.props.reply}

src/components/message-input/index.tsx

@@ -17,6 +17,7 @@ require('./styles.scss');
 export interface Properties {
   className?: string;
   placeholder?: string;
+  id?: string;
   onSubmit: (message: string, mentionedUserIds: User['id'][], media: Media[]) => void;
   initialValue?: string;
   reply?: null | ParentMessage;
@@ -199,6 +200,7 @@ export class MessageInput extends React.Component<Properties, State> {
                 <MentionsInput
                   inputRef={this.textareaRef}
                   className='mentions-text-area__wrap'
+                  id={this.props.id}
                   placeholder={this.props.placeholder}
                   onKeyDown={this.onSubmit}
                   onChange={this.contentChanged}