ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Message List: Fix jumping scroll after focusing to a borderline message

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-03-31 01:13:24 -05:00
parent b42c03904a
commit 9753b346dd
2 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/middle/message/Message.tsx
View File

@ -67,7 +67,7 @@ import {
selectTopicFromMessage, selectTopicFromMessage,
selectTabState, selectTabState,
selectChatTranslations, selectChatTranslations,
selectRequestedTranslationLanguage, selectRequestedTranslationLanguage, selectCurrentMessageIds,
} from '../../../global/selectors'; } from '../../../global/selectors';
import { import {
getMessageContent, getMessageContent,
@ -211,6 +211,7 @@ type StateProps = {
focusDirection?: FocusDirection; focusDirection?: FocusDirection;
noFocusHighlight?: boolean; noFocusHighlight?: boolean;
isResizingContainer?: boolean; isResizingContainer?: boolean;
viewportIds?: number[];
isForwarding?: boolean; isForwarding?: boolean;
isChatWithSelf?: boolean; isChatWithSelf?: boolean;
isRepliesChat?: boolean; isRepliesChat?: boolean;
@ -315,6 +316,7 @@ const Message: FC<OwnProps & StateProps> = ({
focusDirection, focusDirection,
noFocusHighlight, noFocusHighlight,
isResizingContainer, isResizingContainer,
viewportIds,
isForwarding, isForwarding,
isChatWithSelf, isChatWithSelf,
isRepliesChat, isRepliesChat,
@ -645,7 +647,7 @@ const Message: FC<OwnProps & StateProps> = ({
replyMessage, replyMessage,
message.id, message.id,
); );
useFocusMessage(ref, chatId, isFocused, focusDirection, noFocusHighlight, isResizingContainer); useFocusMessage(ref, chatId, isFocused, focusDirection, noFocusHighlight, isResizingContainer, viewportIds);
const shouldFocusOnResize = isLastInGroup; const shouldFocusOnResize = isLastInGroup;
@ -1450,7 +1452,12 @@ export default memo(withGlobal<OwnProps>(
...((canShowSender || isLocation) && { sender }), ...((canShowSender || isLocation) && { sender }),
...(isOutgoing && { outgoingStatus: selectOutgoingStatus(global, message, messageListType === 'scheduled') }), ...(isOutgoing && { outgoingStatus: selectOutgoingStatus(global, message, messageListType === 'scheduled') }),
...(typeof uploadProgress === 'number' && { uploadProgress }), ...(typeof uploadProgress === 'number' && { uploadProgress }),
...(isFocused && { focusDirection, noFocusHighlight, isResizingContainer }), ...(isFocused && {
focusDirection,
noFocusHighlight,
isResizingContainer,
viewportIds: selectCurrentMessageIds(global, chatId, threadId, messageListType),
}),
}; };
}, },
)(Message)); )(Message));

3
src/components/middle/message/hooks/useFocusMessage.ts
View File

@ -14,6 +14,7 @@ export default function useFocusMessage(
focusDirection?: FocusDirection, focusDirection?: FocusDirection,
noFocusHighlight?: boolean, noFocusHighlight?: boolean,
isResizingContainer?: boolean, isResizingContainer?: boolean,
viewportIds?: number[],
) { ) {
useLayoutEffect(() => { useLayoutEffect(() => {
if (isFocused && elementRef.current) { if (isFocused && elementRef.current) {
@ -32,6 +33,6 @@ export default function useFocusMessage(
); );
} }
}, [ }, [
elementRef, chatId, isFocused, focusDirection, noFocusHighlight, isResizingContainer, elementRef, chatId, isFocused, focusDirection, noFocusHighlight, isResizingContainer, viewportIds,
]); ]);
} }