diff --git a/src/script/components/Conversation/Conversation.tsx b/src/script/components/Conversation/Conversation.tsx index 4e2918b3a1b..38ec0b1e59c 100644 --- a/src/script/components/Conversation/Conversation.tsx +++ b/src/script/components/Conversation/Conversation.tsx @@ -17,7 +17,7 @@ * */ -import {UIEvent, useCallback, useState} from 'react'; +import {UIEvent, useCallback, useEffect, useState} from 'react'; import cx from 'classnames'; import {container} from 'tsyringe'; @@ -124,6 +124,12 @@ export const Conversation = ({ const {addReadReceiptToBatch} = useReadReceiptSender(repositories.message); + useEffect(() => { + // When the component is mounted we want to make sure its conversation entity's last message is marked as visible + // not to display the jump to last message button initially + activeConversation?.isLastMessageVisible(true); + }, [activeConversation]); + const uploadImages = useCallback( (images: File[]) => { if (!activeConversation || isHittingUploadLimit(images, repositories.asset)) { diff --git a/src/script/components/MessagesList/Message/index.tsx b/src/script/components/MessagesList/Message/index.tsx index 4773cc779ca..ea77a4d0193 100644 --- a/src/script/components/MessagesList/Message/index.tsx +++ b/src/script/components/MessagesList/Message/index.tsx @@ -135,6 +135,9 @@ export const Message = (props: MessageParams & {scrollTo?: ScrollToElement}) => } }, [isFocused]); + // When component is unmounted, it's not visible anymore + useEffect(() => onVisibilityLost, [onVisibilityLost]); + // set message elements focus for non content type mesages // some non content type message has interactive element like invite people for member message useEffect(() => { diff --git a/src/script/components/RichTextEditor/plugins/EmojiPickerPlugin/EmojiPickerPlugin.tsx b/src/script/components/RichTextEditor/plugins/EmojiPickerPlugin/EmojiPickerPlugin.tsx index 5876a2d3876..e9de730fce0 100644 --- a/src/script/components/RichTextEditor/plugins/EmojiPickerPlugin/EmojiPickerPlugin.tsx +++ b/src/script/components/RichTextEditor/plugins/EmojiPickerPlugin/EmojiPickerPlugin.tsx @@ -181,7 +181,7 @@ export function EmojiPickerPlugin({openStateRef}: Props) { const {bottom, left} = getPosition(); return ReactDOM.createPortal( -
+
{options.map((option: EmojiOption, index) => (