Merge pull request #17745 from wireapp/dev

chore: merge dev to new-navigation

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)) {

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(() => {

src/script/components/RichTextEditor/plugins/EmojiPickerPlugin/EmojiPickerPlugin.tsx

@@ -181,7 +181,7 @@ export function EmojiPickerPlugin({openStateRef}: Props) {
     const {bottom, left} = getPosition();
 
     return ReactDOM.createPortal(
-      <div className="typeahead-popover emoji-menu">
+      <div data-outside-click-ignore className="typeahead-popover emoji-menu">
         <div className="conversation-input-bar-emoji-list" style={{bottom, left}}>
           {options.map((option: EmojiOption, index) => (
             <EmojiItem