Forum: Fix jumping focus when going to message in topic (#2830)

src/components/middle/ActionMessage.tsx

@@ -36,6 +36,7 @@ import ActionMessageSuggestedAvatar from './ActionMessageSuggestedAvatar';
 
 type OwnProps = {
   message: ApiMessage;
+  threadId?: number;
   observeIntersectionForReading?: ObserveFn;
   observeIntersectionForLoading?: ObserveFn;
   observeIntersectionForPlaying?: ObserveFn;
@@ -234,7 +235,7 @@ const ActionMessage: FC<OwnProps & StateProps> = ({
 };
 
 export default memo(withGlobal<OwnProps>(
-  (global, { message }): StateProps => {
+  (global, { message, threadId }): StateProps => {
     const { byId: usersById } = global.users;
     const userId = message.senderId;
     const { targetUserIds, targetChatId } = message.content.action || {};
@@ -243,7 +244,7 @@ export default memo(withGlobal<OwnProps>(
       ? selectChatMessage(global, message.chatId, targetMessageId)
       : undefined;
 
-    const isFocused = selectIsMessageFocused(global, message);
+    const isFocused = threadId ? selectIsMessageFocused(global, message, threadId) : false;
     const {
       direction: focusDirection,
       noHighlight: noFocusHighlight,

src/components/middle/MessageListContent.tsx

@@ -146,6 +146,7 @@ const MessageListContent: FC<OwnProps> = ({
           <ActionMessage
             key={message.id}
             message={message}
+            threadId={threadId}
             isInsideTopic={Boolean(threadId && threadId !== MAIN_THREAD_ID)}
             observeIntersectionForReading={observeIntersectionForReading}
             observeIntersectionForLoading={observeIntersectionForLoading}

src/components/middle/message/Message.tsx

@@ -1308,8 +1308,8 @@ export default memo(withGlobal<OwnProps>(
     const uploadProgress = selectUploadProgress(global, message);
     const isFocused = messageListType === 'thread' && (
       album
-        ? album.messages.some((m) => selectIsMessageFocused(global, m))
+        ? album.messages.some((m) => selectIsMessageFocused(global, m, threadId))
-        : selectIsMessageFocused(global, message)
+        : selectIsMessageFocused(global, message, threadId)
     );
 
     const {

src/global/actions/ui/messages.ts

@@ -416,12 +416,12 @@ addActionHandler('focusMessage', (global, actions, payload): ActionReturnType =>
   }
   blurTimeout = window.setTimeout(() => {
     global = getGlobal();
-    global = updateFocusedMessage(global, undefined, undefined, undefined, undefined, tabId);
+    global = updateFocusedMessage(global, undefined, undefined, undefined, undefined, undefined, tabId);
     global = updateFocusDirection(global, undefined, tabId);
     setGlobal(global);
   }, noHighlight ? FOCUS_NO_HIGHLIGHT_DURATION : FOCUS_DURATION);
 
-  global = updateFocusedMessage(global, chatId, messageId, noHighlight, isResizingContainer, tabId);
+  global = updateFocusedMessage(global, chatId, messageId, threadId, noHighlight, isResizingContainer, tabId);
   global = updateFocusDirection(global, undefined, tabId);
 
   if (replyMessageId) {

src/global/reducers/messages.ts

@@ -501,13 +501,15 @@ function updateScheduledMessages<T extends GlobalState>(
 }
 
 export function updateFocusedMessage<T extends GlobalState>(
-  global: T, chatId?: string, messageId?: number, noHighlight = false, isResizingContainer = false,
+  global: T, chatId?: string, messageId?: number, threadId = MAIN_THREAD_ID, noHighlight = false,
+  isResizingContainer = false,
   ...[tabId = getCurrentTabId()]: TabArgs<T>
 ): T {
   return updateTabState(global, {
     focusedMessage: {
       ...selectTabState(global, tabId).focusedMessage,
       chatId,
+      threadId,
       messageId,
       noHighlight,
       isResizingContainer,

src/global/selectors/messages.ts

@@ -367,10 +367,13 @@ export function selectFocusedMessageId<T extends GlobalState>(
 }
 
 export function selectIsMessageFocused<T extends GlobalState>(
-  global: T, message: ApiMessage,
+  global: T, message: ApiMessage, currentThreadId: number,
   ...[tabId = getCurrentTabId()]: TabArgs<T>
 ) {
   const focusedId = selectFocusedMessageId(global, message.chatId, tabId);
+  const threadId = selectTabState(global, tabId).focusedMessage?.threadId;
+
+  if (currentThreadId !== threadId) return false;
 
   return focusedId ? focusedId === message.id || focusedId === message.previousLocalId : false;
 }