diff --git a/src/components/chat-view-container/chat-view-container.test.tsx b/src/components/chat-view-container/chat-view-container.test.tsx index 5f9c924cb..bfcefcaaa 100644 --- a/src/components/chat-view-container/chat-view-container.test.tsx +++ b/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', () => { diff --git a/src/components/chat-view-container/chat-view-container.tsx b/src/components/chat-view-container/chat-view-container.tsx index 9ae368be8..7b2798abb 100644 --- a/src/components/chat-view-container/chat-view-container.tsx +++ b/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 { 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 { onMessageInputRendered = (textareaRef: RefObject) => { if (textareaRef && textareaRef.current) { - textareaRef.current.focus(); + if ( + (this.props.activeMessengerId && this.props.activeMessengerId === textareaRef.current.id) || + !this.props.activeMessengerId + ) { + textareaRef.current.focus(); + } } }; diff --git a/src/components/chat-view-container/chat-view.tsx b/src/components/chat-view-container/chat-view.tsx index 5a8978aa5..69a71b292 100644 --- a/src/components/chat-view-container/chat-view.tsx +++ b/src/components/chat-view-container/chat-view.tsx @@ -214,6 +214,7 @@ export class ChatView extends React.Component { {isMemberOfChannel && ( void; initialValue?: string; reply?: null | ParentMessage; @@ -199,6 +200,7 @@ export class MessageInput extends React.Component {