refactor: stash long list updates

src/common/component/ContextMenu.js

@@ -1,7 +1,7 @@
 // import { useRef } from "react";
 // import styled from "styled-components";
 import StyledMenu from "./styled/Menu";
-export default function ContextMenu({ items = [], hideMenu }) {
+export default function ContextMenu({ items = [], hideMenu = null }) {
   return (
     <StyledMenu>
       {items.map((item) => {
@@ -11,7 +11,9 @@ export default function ContextMenu({ items = [], hideMenu }) {
           icon = null,
           handler = (evt) => {
             evt.preventDefault();
-            hideMenu();
+            if (hideMenu) {
+              hideMenu();
+            }
           },
           underline = false,
           danger = false,
@@ -24,7 +26,9 @@ export default function ContextMenu({ items = [], hideMenu }) {
             key={title}
             onClick={(evt) => {
               handler(evt);
-              hideMenu();
+              if (hideMenu) {
+                hideMenu();
+              }
             }}
           >
             {icon}

src/common/component/Message/index.js

@@ -87,8 +87,10 @@ function Message({
 
   const pinInfo = getPinInfo(mid);
   // return null;
+  const _key = properties?.local_id || mid;
   return (
     <StyledWrapper
+      key={_key}
       onContextMenu={handleContextMenuEvent}
       data-msg-mid={mid}
       ref={inviewRef}
@@ -97,6 +99,8 @@ function Message({
       } ${contextMenuVisible ? "contextVisible" : ""} `}
     >
       <Tippy
+        key={_key}
+        popperOptions={{ strategy: "fixed" }}
         disabled={readOnly}
         interactive
         placement="left"

src/common/component/Profile/styled.js

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 
 const StyledWrapper = styled.div`
+  z-index: 9999;
   display: flex;
   flex-direction: column;
   justify-content: center;