Hide the messages action menu on tap outside it \ on scroll #2146

src/pages/common/components/ChatComponent/ChatComponent.tsx

@@ -11,7 +11,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { useDebounce, useMeasure } from "react-use";
 import classNames from "classnames";
 import isHotkey from "is-hotkey";
-import { delay, omit } from "lodash";
+import { debounce, delay, omit } from "lodash";
 import { v4 as uuidv4 } from "uuid";
 import { selectUser } from "@/pages/Auth/store/selectors";
 import { ChatService, DiscussionMessageService, FileService } from "@/services";
@@ -59,6 +59,7 @@ import {
   selectFilesPreview,
   FileInfo,
 } from "@/store/states";
+import { ChatContentContext, ChatContentData } from "../CommonContent/context";
 import {
   ChatContent,
   ChatContentRef,
@@ -181,6 +182,15 @@ export default function ChatComponent({
   const chatContentRef = useRef<ChatContentRef>(null);
   const chatWrapperId = useMemo(() => `chat-wrapper-${uuidv4()}`, []);
   const chatInputWrapperRef = useRef<HTMLDivElement>(null);
+  const chatContainerRef = useRef<HTMLDivElement>(null);
+  const [isScrolling, setScrolling] = useState(false);
+  const chatContentContextValue: ChatContentData = useMemo(
+    () => ({
+      isScrolling,
+      chatContentRect: chatContainerRef.current?.getBoundingClientRect(),
+    }),
+    [isScrolling],
+  );
 
   const [message, setMessage] = useState<TextEditorValue>(
     parseStringToTextEditorValue(),
@@ -591,6 +601,23 @@ export default function ChatComponent({
     };
   }, []);
 
+  useEffect(() => {
+    const deactivateScrollingFlag = debounce(() => {
+      setScrolling(false);
+    }, 300);
+
+    function handleScroll() {
+      setScrolling(true);
+      deactivateScrollingFlag();
+    }
+
+    chatContainerRef.current?.addEventListener("scroll", handleScroll);
+
+    return () => {
+      chatContainerRef.current?.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
   const renderChatInput = (): ReactNode => {
     const shouldHideChatInput = !isChatChannel && (!hasAccess || isHidden);
 
@@ -666,32 +693,35 @@ export default function ChatComponent({
           [styles.emptyChat]: !dateList.length,
         })}
         id={chatWrapperId}
+        ref={chatContainerRef}
       >
-        <ChatContent
-          ref={chatContentRef}
-          type={type}
-          commonMember={commonMember}
-          governanceCircles={governanceCircles}
-          chatWrapperId={chatWrapperId}
-          messages={messages}
-          dateList={dateList}
-          lastSeenItem={lastSeenItem}
-          hasPermissionToHide={hasPermissionToHide}
-          users={users}
-          discussionId={discussionId}
-          feedItemId={feedItemId}
-          isLoading={!discussion || isLoadingDiscussionMessages}
-          onMessageDelete={handleMessageDelete}
-          directParent={directParent}
-          onUserClick={onUserClick}
-          onFeedItemClick={onFeedItemClick}
-          onInternalLinkClick={onInternalLinkClick}
-          isEmpty={
-            discussionMessagesData.fetched &&
-            !discussionMessagesData.data?.length && // for non direct messages chats. not using messageCount because it includes the deleted messages as well.
-            Object.keys(discussionMessages).length === 0 // for direct messages chats
-          }
-        />
+        <ChatContentContext.Provider value={chatContentContextValue}>
+          <ChatContent
+            ref={chatContentRef}
+            type={type}
+            commonMember={commonMember}
+            governanceCircles={governanceCircles}
+            chatWrapperId={chatWrapperId}
+            messages={messages}
+            dateList={dateList}
+            lastSeenItem={lastSeenItem}
+            hasPermissionToHide={hasPermissionToHide}
+            users={users}
+            discussionId={discussionId}
+            feedItemId={feedItemId}
+            isLoading={!discussion || isLoadingDiscussionMessages}
+            onMessageDelete={handleMessageDelete}
+            directParent={directParent}
+            onUserClick={onUserClick}
+            onFeedItemClick={onFeedItemClick}
+            onInternalLinkClick={onInternalLinkClick}
+            isEmpty={
+              discussionMessagesData.fetched &&
+              !discussionMessagesData.data?.length && // for non direct messages chats. not using messageCount because it includes the deleted messages as well.
+              Object.keys(discussionMessages).length === 0 // for direct messages chats
+            }
+          />
+        </ChatContentContext.Provider>
       </div>
       <div className={styles.bottomChatContainer}>
         <MessageReply users={users} />

src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx

@@ -127,20 +127,6 @@ const ChatContent: ForwardRefRenderFunction<
     [chatWrapperId],
   );
 
-  const scrollMore = useCallback(
-    (toY: number) =>
-      setTimeout(
-        () =>
-          animateScroll.scrollMore(toY, {
-            containerId: chatWrapperId,
-            smooth: true,
-            delay: 0,
-          }),
-        0,
-      ),
-    [chatWrapperId],
-  );
-
   const dateListReverse = useMemo(() => [...dateList].reverse(), [dateList]);
 
   useEffect(() => {
@@ -241,17 +227,6 @@ const ChatContent: ForwardRefRenderFunction<
                   scrollToRepliedMessage={scrollToRepliedMessage}
                   highlighted={message.id === highlightedMessageId}
                   hasPermissionToHide={hasPermissionToHide}
-                  onMessageDropdownOpen={(isOpen, messageTopPosition = 0) => {
-                    const dropdownHeight = 240;
-                    const visibleDropdownHeight =
-                      window.innerHeight - messageTopPosition;
-                    const hasEnoughSpaceForMenu =
-                      visibleDropdownHeight >= dropdownHeight;
-
-                    if (isOpen && !hasEnoughSpaceForMenu) {
-                      scrollMore(dropdownHeight - visibleDropdownHeight + 20);
-                    }
-                  }}
                   users={users}
                   feedItemId={feedItemId}
                   commonMember={commonMember}

src/pages/common/components/CommonContent/context.ts

@@ -0,0 +1,13 @@
+import React, { useContext } from "react";
+
+export interface ChatContentData {
+  isScrolling: boolean;
+  chatContentRect?: DOMRect;
+}
+
+export const ChatContentContext = React.createContext<ChatContentData>({
+  isScrolling: false,
+});
+
+export const useChatContentContext = (): ChatContentData =>
+  useContext(ChatContentContext);

src/shared/components/Chat/ChatMessage/ChatMessage.tsx

@@ -3,7 +3,6 @@ import React, {
   useCallback,
   useEffect,
   useState,
-  useRef,
   useMemo,
 } from "react";
 import classNames from "classnames";
@@ -53,10 +52,6 @@ interface ChatMessageProps {
   chatType: ChatType;
   highlighted?: boolean;
   className?: string;
-  onMessageDropdownOpen?: (
-    isOpen: boolean,
-    messageTopPosition?: number,
-  ) => void;
   user: User | null;
   scrollToRepliedMessage: (messageId: string) => void;
   hasPermissionToHide: boolean;
@@ -87,7 +82,6 @@ export default function ChatMessage({
   chatType,
   highlighted = false,
   className,
-  onMessageDropdownOpen,
   user,
   scrollToRepliedMessage,
   hasPermissionToHide,
@@ -101,7 +95,6 @@ export default function ChatMessage({
   onFeedItemClick,
   onInternalLinkClick,
 }: ChatMessageProps) {
-  const messageRef = useRef<HTMLDivElement>(null);
   const { getCommonPagePath, getCommonPageAboutTabPath } = useRoutesContext();
   const [isEditMode, setEditMode] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -141,15 +134,6 @@ export default function ChatMessage({
     }
   };
 
-  const handleMessageDropdownOpen =
-    onMessageDropdownOpen &&
-    ((isOpen: boolean) => {
-      onMessageDropdownOpen(
-        isOpen,
-        messageRef.current?.getBoundingClientRect().top,
-      );
-    });
-
   useEffect(() => {
     (async () => {
       if (!discussionMessage.text) {
@@ -217,14 +201,6 @@ export default function ChatMessage({
     onUserClick,
   ]);
 
-  const handleMenuToggle = (isOpen: boolean) => {
-    setIsMenuOpen(isOpen);
-
-    if (handleMessageDropdownOpen) {
-      handleMessageDropdownOpen(isOpen);
-    }
-  };
-
   const handleLongPress = () => {
     setIsMenuOpen(true);
   };
@@ -383,7 +359,6 @@ export default function ChatMessage({
         ) : (
           <>
             <div
-              ref={messageRef}
               className={classNames(styles.messageText, {
                 [styles.messageTextCurrentUser]: !isNotCurrentUserMessage,
                 [styles.messageTextRtl]: isRtlText(discussionMessage.text),
@@ -452,7 +427,7 @@ export default function ChatMessage({
                   elem={discussionMessage}
                   className={styles.dropdownMenu}
                   variant={Orientation.Arrow}
-                  onMenuToggle={handleMenuToggle}
+                  onMenuToggle={setIsMenuOpen}
                   transparent
                   isDiscussionMessage
                   isChatMessage={chatType === ChatType.ChatMessages}

src/shared/components/Dropdown/Dropdown.tsx

@@ -7,7 +7,6 @@ import React, {
   CSSProperties,
   ForwardRefRenderFunction,
   ReactNode,
-  RefObject,
   useEffect,
 } from "react";
 import {
@@ -21,9 +20,11 @@ import {
 } from "react-aria-menubutton";
 import classNames from "classnames";
 import { v4 as uuidv4 } from "uuid";
+import { useChatContentContext } from "@/pages/common/components/CommonContent/context";
 import { Loader } from "@/shared/components";
 import RightArrowIcon from "../../icons/rightArrow.icon";
 import { GlobalOverlay } from "../GlobalOverlay";
+import { getMenuStyles } from "./helpers";
 import "./index.scss";
 
 export interface Styles {
@@ -79,53 +80,6 @@ export interface DropdownProps {
   disabled?: boolean;
 }
 
-const getFixedMenuStyles = (
-  ref: RefObject<HTMLElement>,
-  menuRef: HTMLUListElement | null,
-): CSSProperties | undefined => {
-  if (!ref.current || !menuRef) {
-    return;
-  }
-
-  const { top, left, height } = ref.current.getBoundingClientRect();
-  const menuRect = menuRef.getBoundingClientRect();
-  const bottom = top + height + menuRect.height;
-  const styles: CSSProperties = {
-    left,
-    top: top + height,
-  };
-
-  if (window.innerHeight < bottom) {
-    styles.top = top - menuRect.height;
-  }
-  if (styles.top && styles.top < 0) {
-    styles.top = 0;
-    styles.bottom = 0;
-    styles.maxHeight = "100%";
-  }
-
-  return styles;
-};
-
-const getMenuStyles = (
-  ref: RefObject<HTMLElement>,
-  menuRef: HTMLUListElement | null,
-  shouldBeFixed?: boolean,
-): CSSProperties | undefined => {
-  if (!menuRef) {
-    return;
-  }
-  if (shouldBeFixed) {
-    return getFixedMenuStyles(ref, menuRef);
-  }
-
-  const { right } = menuRef.getBoundingClientRect();
-
-  if (window.innerWidth < right) {
-    return { right: 0 };
-  }
-};
-
 const Dropdown: ForwardRefRenderFunction<DropdownRef, DropdownProps> = (
   props,
   dropdownRef,
@@ -153,6 +107,8 @@ const Dropdown: ForwardRefRenderFunction<DropdownRef, DropdownProps> = (
   const [isOpen, setIsOpen] = useState(false);
   const selectedOption = options.find((option) => option.value === value);
   const dropdownId = useMemo(() => `dropdown-${uuidv4()}`, []);
+  const { isScrolling: isChatScrolling, chatContentRect } =
+    useChatContentContext();
 
   const handleSelection: MenuWrapperProps<HTMLElement>["onSelection"] = (
     value,
@@ -179,9 +135,16 @@ const Dropdown: ForwardRefRenderFunction<DropdownRef, DropdownProps> = (
     }
   };
 
+  useEffect(() => {
+    if (isMenuOpen && isChatScrolling) {
+      handleMenuToggle({ isOpen: false });
+      closeMenu(dropdownId);
+    }
+  }, [isMenuOpen, isChatScrolling]);
+
   const menuStyles = useMemo(
-    () => getMenuStyles(menuButtonRef, menuRef, shouldBeFixed),
-    [menuRef, shouldBeFixed],
+    () => getMenuStyles(menuButtonRef, menuRef, chatContentRect, shouldBeFixed),
+    [menuRef, shouldBeFixed, chatContentRect],
   );
 
   useImperativeHandle(